How to use the react-use/lib/useMouse function in react-use

To help you get started, we’ve selected a few react-use examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github nezz0746 / react-redux-hooks-starter / src / pages / HomePage / index.js View on Github external
const HomePage = () => {
  const appRef = React.useRef(null);
  const { docX, docY } = useMouse(appRef);
  const dispatch = useDispatch();
  const { counter, resetLoading } = useSelector(state => ({
    counter: state.get('Home').get('counter'),
    resetLoading: state.get('Home').get('resetLoading')
  }), shallowEqual);
  const [rect, ref] = useClientRect();
  const center = getCoordinates(rect !== null ? rect : {});

  const increment = () => {
    dispatch(incrementCounter(counter));
  };

  const decrement = () => {
    dispatch(decrementCounter(counter));
  };
github alampros / react-confetti / stories / mouse-rain.story.jsx View on Github external
const MouseRain = () => {
  const ref = useRef(null)
  const { docX } = useMouse(ref)
  const activeProps = docX ? {
    confettiSource: {
      w: 0,
      h: 0,
      x: docX,
      y: 0,
    },
  } : {
    run: false,
  }
  return (
    <>
      <p style="{{">Move your mouse</p>
github ShizukuIchi / winXP / src / WinXP / index.js View on Github external
function WinXP() {
  const [state, dispatch] = useReducer(reducer, initState);
  const ref = useRef(null);
  const mouse = useMouse(ref);
  const focusedAppId = getFocusedAppId();
  const onFocusApp = useCallback(id => {
    dispatch({ type: FOCUS_APP, payload: id });
  }, []);
  const onMaximizeWindow = useCallback(
    id => {
      if (focusedAppId === id) {
        dispatch({ type: TOGGLE_MAXIMIZE_APP, payload: id });
      }
    },
    [focusedAppId],
  );
  const onMinimizeWindow = useCallback(
    id => {
      if (focusedAppId === id) {
        dispatch({ type: MINIMIZE_APP, payload: id });
github ShizukuIchi / fake-screen / src / themes / WinXP / index.js View on Github external
function WinXP() {
  const [state, dispatch] = useReducer(reducer, initState);
  const ref = useRef(null);
  const mouse = useMouse(ref);
  function onFocusApp(id) {
    dispatch({ type: 'FOCUS_APP', payload: id });
  }
  function onMaximizeWindow(id) {
    if (getFocusedAppId() === id && state.focusing === 'window') {
      dispatch({ type: 'TOGGLE_MAXIMIZE_APP', payload: id });
    }
  }
  function onMinimizeWindow(id) {
    if (getFocusedAppId() === id && state.focusing === 'window') {
      dispatch({ type: 'MINIMIZE_APP', payload: id });
    }
  }
  function onMouseDownFooterApp(id) {
    if (getFocusedAppId() === id) {
      dispatch({ type: 'MINIMIZE_APP', payload: id });