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:

yarn install react-contextifier

Using npm:

npm install --save react-contextifier

Exemples

Simple context

import { createContext, Provider, Consumer } from 'react-contextifier'

createContext('user')

const User () => (
  <Provider context="user" value={{ name: 'John' }}>
    <Profile />
  </Provider>
)

const Profile = () => (
  <Consumer context="user">{({ name }) => <div>{name}</div>}</Consumer>
)

With HOC

import { subscribe } from 'react-contextifier';

const Profile = ({ name }) => <div>{name}</div>;

export default subscribe({
  user: ({ name }) => ({ name }),
})(Profile);

Multiple context

contexts.js

import { createContext } from 'react-contextifier';

createContext('user');
createContext('todos');

User.js

import { Provider } from 'react-contextifier';

const User = () => (
  <Provider context="user" value={{ name: 'John' }}>
    <Missions />
  </Provider>
);

Missions.js

import { Provider } from 'react-contextifier';

const Missions = () => (
  <Provider context="missions" value={{ list: [] }}>
    <Missions />
  </Provider>
);

Profile.js

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

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 <Provider value={this.state}>{children}</Provider>;
  }
}

registerCustomProvider('message', MessageProvider);

App.js

import { Provider } from 'react-contextifier';

const Message = ({ message, updateMessage }) => <div>{message}</div>;

const App = () => (
  <Provider context="message">
    <Message />
  </Provider>
);