https://github.com/edmond-xaviercollot/react-contextifier
React Context Api made easy
https://github.com/edmond-xaviercollot/react-contextifier
javascript react react-context reactjs redux
Last synced: 9 months ago
JSON representation
React Context Api made easy
- Host: GitHub
- URL: https://github.com/edmond-xaviercollot/react-contextifier
- Owner: Edmond-XavierCollot
- Created: 2018-07-02T08:04:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-12T16:16:37.000Z (about 7 years ago)
- Last Synced: 2025-04-21T14:19:06.924Z (9 months ago)
- Topics: javascript, react, react-context, reactjs, redux
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-contextifier
react-contextifier is a wrapper of the react context api.
Its main purpose is to reduce the verbosity and the frictions encountered when managing contexts
## Installation
Using Yarn:
```shell
yarn install react-contextifier
```
Using npm:
```shell
npm install --save react-contextifier
```
## Exemples
### Simple context
```javascript
import { createContext, Provider, Consumer } from 'react-contextifier'
createContext('user')
const User () => (
)
const Profile = () => (
{({ name }) =>
{name}}
)
```
### With HOC
```javascript
import { subscribe } from 'react-contextifier';
const Profile = ({ name }) =>
{name};
export default subscribe({
user: ({ name }) => ({ name }),
})(Profile);
```
### Multiple context
**contexts.js**
```javascript
import { createContext } from 'react-contextifier';
createContext('user');
createContext('todos');
```
**User.js**
```javascript
import { Provider } from 'react-contextifier';
const User = () => (
);
```
**Missions.js**
```javascript
import { Provider } from 'react-contextifier';
const Missions = () => (
);
```
**Profile.js**
```javascript
import { subscribe } from 'react-contextifier'
const Profile = ({ userName, missions }) => (...)
const mapContextsToProps = {
user: ({ name }) => ({ userName: name }),
missions: ({ list }) => ({ mission: list })
}
export default subscribe(mapContextsToProps)(Profile)
```
### Custom Provider
**MessageProvider.js**
```javascript
import { createContext, registerProvider } from 'react-contextifier';
const { Provider } = createContext('hello');
class MessageProvider extends Component {
constructor(props) {
super(props);
this.state = {
message: 'hello',
updateMessage: this.updateMessage,
};
}
updateMessage = message => {
this.setState({ message });
return message;
};
render() {
const { children } = this.props;
return {children};
}
}
registerCustomProvider('message', MessageProvider);
```
**App.js**
```javascript
import { Provider } from 'react-contextifier';
const Message = ({ message, updateMessage }) =>
{message};
const App = () => (
);
```