react-pendulum
A React Context utility library.
Install
Using npm
npm install --save react-pendulumUsing yarn
yarn add react-pendulumComponents
MultiProvider
A component to clean up the nasty code you get from taking advantage of React Context API.
Props
providersthe array of providers instances to wrap to thechildren
import React, { Component, createContext } from 'react'
import { MultiProvider } from 'react-pendulum'
const FirstNameContext = createContext<string>('John')
const LastNameContext = createContext<string>('Doe')
const HelloWorld = () => {
const firstName = useContext(FirstNameContext)
const lastName = useContext(LastNameContext)
return <>{`Hello ${firstName} ${lastName}`}</>
}
class App extends Component {
render() {
return (
<MultiProvider
providers={[
<FirstNameContext.Provider value='Yugi' />,
<LastNameContext.Provider value='Muto' />
]}
>
<HelloWorld />
</MultiProvider>
)
}
}Utilities
withContext
A high order function to create the withContext HOC for any Context.
Args:
Contextthe context to assign the valuepropsNamethe props name to assign the value ofContext
import React, { Component, createContext } from 'react'
import { withContext } from 'react-pendulum'
const NameContext = createContext<string>('John Doe')
const withName = withContext(NameContext, 'name');
const HelloWorld = withName(({ name }) => {
return <>{`Hello ${name}`}</>
})