@fiad/react-mouse-context v1.0.0

react-mouse-context

A React context wrapper to handle mouse scenarios

Installation

You can easily install the library via npm by running the following command:

npm install --save @fiad/react-mouse-context

Usage

As first step, you need to import the context provider from library and implement it in your application, as follows:

import React, { Component } from 'react'
import MouseContext from '@fiad/react-mouse-context'
import MyMouseClientComponent from 'path/to/my/components/MyMouseClientComponent'

class App extends Component {
  render() {
    return (
      <MouseContext>
        <MyMouseClientComponent />
      </MouseContext>
    )
  }
}

export default App

A global mouse context will be now available and the following data will be accessible from its child components:

For details about properties, look at MouseEvent specification.

At this point, you only have to make context's data accessible within your component. For this goal, you can use both React's hooks and Context API depending on how your component has been implemented. Lets see both examples:

useContext (hook)

import React, { useContext } from 'react'
import { Context as MouseContext } from '@fiad/react-mouse-context'

const MyMouseClientComponent = () => {
  const {
    clientX,
    clientXPercentage,
    clientY,
    clientYPercentage,
    pageX,
    pageXPercentage,
    pageY,
    pageYPercentage,
    movementX,
    movementY
  } = useContext(MouseContext)
  {/* make your own stuff here with context's data */}
  return <h1>My mouse client component</h1>
}

export default MyMouseClientComponent

contextType (Context API)

import React, { Component } from 'react'
import { Context as MouseContext } from '@fiad/react-mouse-context'

class MyMouseClientComponent extends Component {
  static contextType = MouseContext

  render() {
    const {
      clientX,
      clientXPercentage,
      clientY,
      clientYPercentage,
      pageX,
      pageXPercentage,
      pageY,
      pageYPercentage,
      movementX,
      movementY
    } = this.context
    {/* make your own stuff here with context's data */}
    return <h1>My mouse client component</h1>
  }
}

export default MyMouseClientComponent