#Mouse Info API

#<MouseInfoProvider>

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

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

#Props

React children.

#Context

Current mouse position along the x-axis

Current mouse position along the y-axis

Last number of pixels moved along the x-axis

Last number of pixels moved along the y-axis

Direction of the last mouse movement along the x-axis

Direction of the last mouse movement along the y-axis

Percentage moved along the x-axis

Percentage moved along the y-axis

Percentage moved along the both and x and y-axes

Number of animation frames completed

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';