#Mouse Info API

#<MouseInfoProvider>

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

export const MyApp = () = (
  <MouseInfoProvider>
    ...
  </MouseInfoProvider>
);

#Props

children
  :  React.ReactNode
  |  optional

React children.

#Context

x
  :  number

Current mouse position along the x-axis

y
  :  number

Current mouse position along the y-axis

xDifference
  :  number

Last number of pixels moved along the x-axis

yDifference
  :  number

Last number of pixels moved along the y-axis

xDirection
  :  string

Direction of the last mouse movement along the x-axis

yDirection
  :  string

Direction of the last mouse movement along the y-axis

xPercentage
  :  number

Percentage moved along the x-axis

yPercentage
  :  number

Percentage moved along the y-axis

totalPercentage
  :  number

Percentage moved along the both and x and y-axes

eventsFired
  :  number

Number of animation frames completed

isInViewport
  :  boolean

Toggled as the mouse enters and leaves the viewport

#useMouseInfo

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 (
    ...
  )
};

#withMouseInfo

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 (
    ...
  )
};

#TypeScript

All types can be directly imported.

import {
  MouseInfoProviderProps,
  MouseInfoProps,
  IMouseInfoContext
} from '@faceless-ui/mouse-info/dist/types';