@nfq/react-grid/dist/esm/grid/Skeleton/useSkeleton.js

An fork of react-awesome-styled-grid with more screen classes and some features.

import { useRef, useContext, useEffect, useSyncExternalStore } from 'react';
import { v4 } from 'uuid';
import { ScreenSizeContext } from '../ScreenSizeProvider/ScreenSizeProvider.js';

const useSkeleton = (count, group) => {
  const id = useRef(v4());
  const store = useContext(ScreenSizeContext);
  const selector = state => state[String(group)];
  useEffect(() => {
    const stateId = id.current;
    store.skeletonStore.register(group, {
      count,
      id: stateId
    });
    return () => store.skeletonStore.unregister(group, stateId);
  }, [count, group, store.skeletonStore]);
  const state = useSyncExternalStore(store.skeletonStore.subscribe, () => selector(store.skeletonStore.get()), () => selector(store.skeletonStore.get()));
  useEffect(() => {
    if (group !== 'default') {
      document.querySelectorAll(`[data-skeletongroup="${group}"]`).forEach((element, index) => {
        const delay = window.getComputedStyle(element).getPropertyValue('--nfq-grid-skeleton-animation-delay');
        element.style.setProperty('--skeleton-delay', `${parseFloat(delay) * index}s`);
      });
    }
  }, [group, state]);
};

export { useSkeleton };
//# sourceMappingURL=useSkeleton.js.map