https://github.com/alfredosalzillo/react-pendulum
A React Context utility library.
https://github.com/alfredosalzillo/react-pendulum
multiprovider react treeshakable utility utility-library
Last synced: about 2 months ago
JSON representation
A React Context utility library.
- Host: GitHub
- URL: https://github.com/alfredosalzillo/react-pendulum
- Owner: alfredosalzillo
- Created: 2020-11-14T18:24:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2021-08-13T12:24:14.000Z (almost 4 years ago)
- Last Synced: 2025-03-18T13:19:14.174Z (3 months ago)
- Topics: multiprovider, react, treeshakable, utility, utility-library
- Language: TypeScript
- Homepage:
- Size: 1.04 MB
- Stars: 21
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-pendulum
A [React Context](https://it.reactjs.org/docs/context.html) utility library.
[](https://www.npmjs.com/package/react-pendulum) [](https://standardjs.com) [](https://codecov.io/gh/alfredosalzillo/pendulum)
## Install
Using npm
```bash
npm install --save react-pendulum
```
Using yarn
```bash
yarn add react-pendulum
```## Components
- [MultiProvider](#multiprovider)
### MultiProvider
A component to clean up the nasty code you get from taking advantage of [React Context](https://it.reactjs.org/docs/context.html) API.
Props
- `providers` the array of providers instances to wrap to the `children````tsx
import React, { Component, createContext } from 'react'
import { MultiProvider } from 'react-pendulum'const FirstNameContext = createContext('John')
const LastNameContext = createContext('Doe')const HelloWorld = () => {
const firstName = useContext(FirstNameContext)
const lastName = useContext(LastNameContext)
return <>{`Hello ${firstName} ${lastName}`}>
}class App extends Component {
render() {
return (
,
]}
>
)
}
}
```## Utilities
- [withContext](#withcontext)
### withContext
A high order function to create the `withContext` HOC for any `Context`.Args:
- `Context` the context to assign the value
- `propsName` the props name to assign the value of `Context````tsx
import React, { Component, createContext } from 'react'
import { withContext } from 'react-pendulum'const NameContext = createContext('John Doe')
const withName = withContext(NameContext, 'name');
const HelloWorld = withName(({ name }) => {
return <>{`Hello ${name}`}>
})
```## License
MIT © [](https://github.com/)