import react from 'react'; import MouseInfoProvider from '@faceless-ui/mouse-info; export const MyApp = () = ( <MouseInfoProvider> ... </MouseInfoProvider> );
children
React children.
x
Current mouse position along the x-axis
y
Current mouse position along the y-axis
xDifference
Last number of pixels moved along the x-axis
yDifference
Last number of pixels moved along the y-axis
xDirection
Direction of the last mouse movement along the x-axis
yDirection
Direction of the last mouse movement along the y-axis
xPercentage
Percentage moved along the x-axis
yPercentage
Percentage moved along the y-axis
totalPercentage
Percentage moved along the both and x and y-axes
eventsFired
Number of animation frames completed
isInViewport
Toggled as the mouse enters and leaves the viewport
This is a hook you can use to access the context.
import react from 'react'; import { useMouseInfo } from '@faceless-ui/mouse-info; export const MyComponent = () => { const mouseInfo = useMouseInfo(); return ( ... ) };
This is a higher-order component you can use to access the context.
import react from 'react'; import { withMouseInfo } from '@faceless-ui/mouse-info; export const MyComponent = withMouseInfo((props) => { const { mouseInfo } = props; return ( ... ) };
All types can be directly imported.
import { MouseInfoProviderProps, MouseInfoProps, IMouseInfoContext } from '@faceless-ui/mouse-info/dist/types';