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: over 1 year 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 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-13T12:24:14.000Z (almost 5 years ago)
- Last Synced: 2025-03-18T13:19:14.174Z (over 1 year 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/)