@fiad/react-gyroscope-context v0.1.1

react-gyroscope-context

A React context wrapper to handle gyroscope scenarios, based on gyronorm.js

Installation

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

npm install --save @fiad/react-gyroscope-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 GyroscopeContext from '@fiad/react-gyroscope-context'
import MyGyroscopeClientComponent from 'path/to/my/components/MyGyroscopeClientComponent'

class App extends Component {
  render() {
    return (
      <GyroscopeContext>
        <MyGyroscopeClientComponent />
      </GyroscopeContext>
    )
  }
}

export default App

For details about properties, look at gyronorm.js documentation.

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 GyroscopeContext } from '@fiad/react-gyroscope-context'

const MyGyroscopeClientComponent = () => {
  const { do, dm } = useContext(GyroscopeContext)
  {/* make your own stuff here with context's data */}
  return <h1>My gyroscope client component</h1>
}

export default MyGyroscopeClientComponent

contextType (Context API)

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

class MyGyroscopeClientComponent extends Component {
  static contextType = GyroscopeContext

  render() {
    const { do, dm } = this.context
    {/* make your own stuff here with context's data */}
    return <h1>My gyroscope client component</h1>
  }
}

export default MyGyroscopeClientComponent