@fluent-windows/hooks/es/useReveal/useReveal.js

Fluent-Windows React hooks.

/**
 * Create [Reveal Highlight](https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal) Effects.
 *
 * Demo
 * import { useReveal } from '@fluent-windows/hooks'
 *
 * const [RevealWrapper] = useReveal(66)
 *
 * <RevealWrapper><div>1</div></RevealWrapper>
 * <RevealWrapper><div>2</div></RevealWrapper>
 * <RevealWrapper><div>3</div></RevealWrapper>
 */
import * as React from 'react';
import useGlobal from '../useGlobal';
const global = useGlobal();

const createRevealWrapper = (gradientSize, lightColor) => {
  const RevealWrapper = ({
    children
  }) => {
    const ref = React.useRef();
    const listener = React.useCallback(e => {
      global.requestAnimationFrame(() => {
        const rect = ref.current && ref.current.getBoundingClientRect();

        if (ref.current && rect) {
          const x = e.pageX - rect.left - global.scrollX;
          const y = e.pageY - rect.top - global.scrollY;
          ref.current.style.setProperty('--x', x + 'px');
          ref.current.style.setProperty('--y', y + 'px');
        }
      });
    }, [ref]);
    React.useEffect(() => {
      global.addEventListener('mousemove', listener);
      return () => {
        global.removeEventListener('mousemove', listener);
      };
    }, [listener]);
    const gradient = React.useMemo(() => `radial-gradient(circle ${gradientSize}px at var(--x) var(--y), ${lightColor}, rgba(255,255,255,0))`, []);
    return React.createElement("div", {
      ref: ref,
      style: {
        background: gradient,
        margin: 1,
        padding: 1
      }
    }, React.cloneElement(children));
  };

  return RevealWrapper;
};

function useReveal(gradientSize = 80, lightColor = 'rgba(160, 160, 160, 1)') {
  const RevealWrapper = createRevealWrapper(gradientSize, lightColor);
  return [RevealWrapper];
}

export default useReveal;