#Mouse Info Setup

#Installation

yarn add @faceless-ui/mouse-info

First, wrap your app with the provider. This component does not render anything in the DOM, and should be placed nearest to the top of your app as possible to provide context to any components that need it.

import { MouseInfoProvider } from '@faceless-ui/mouse-info';

export const App = () => {
  return (
    <MouseInfoProvider>
      ...
    </MouseInfoProvider>
  )
}

Then consume the context however needed, most commonly with the useMouseInfo hook.

import { useMouseInfo } from '@faceless-ui/mouse-info';

export const MyComponent = (props) => {
  const mouseInfo = useMouseInfo();
  return (
    ...
  )
}

For more advanced setups, see the full API reference.