reactjs-context

Reactjs-Context (reactjs-context) is a simple library made to easily work with React Context API; but why to use React Context API if Redux exists?

Well,

In other words: removing react-redux from our apps.

In smalls projects I saw myself repeating the same code over-and-over again so I decided to make it a little bit more reusable.

Content

• Install
• Usage
• Questions
• License
• Demo
• Demo source code

Install

$ npm install reactjs-context

Other options?

npm

$ npm install reactjs-context

yarn

$ yarn add reactjs-context

Github Registry

$ npm install abranhe@reactjs-context

Usage

import React from 'react';
import { Provider, Consumer } from 'reactjs-context';

const initialState = { counter: 0 };

const actions = (dispatch) => ({
  increment: () => dispatch({ type: 'increment' }),
  decrement: () => dispatch({ type: 'decrement' }),
});

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { counter: state.counter + 1 };
    case 'decrement':
      return { counter: state.counter - 1 };
  }
};

export default () => (
  <Provider initialState={initialState} reducer={reducer}>
    <Consumer>
      {({ state, dispatch }) => {
        const { increment, decrement } = actions(dispatch);
        return (
          <div>
            <h1>{state.counter}</h1>
            <div>
              <button onClick={() => decrement()}>-</button>
              <button onClick={() => increment()}>+</button>
            </div>
          </div>
        );
      }}
    </Consumer>
  </Provider>
);

Otherwise you can use connect() to access the global state via props.

import { Provider } from 'reactjs-context';
import Counter from './counter';

export default () => (
  <Provider initialState={initialState} reducer={reducer}>
    <Counter/>
  </Provider>
);

Inside counter.js

import { connect } from 'reactjs-context';

export default connect(({ context: {state, dispatch} }) => {
  const { increment, decrement } = actions(dispatch);

  return (
    <div>
      <h1>{state.counter}</h1>
      <div>
        <button onClick={() => decrement()}>-</button>
        <button onClick={() => increment()}>+</button>
      </div>
    </div>
  );
});

This is a simple demo demostrating the usage of reactjs-context with a countere demo.

Questions?

You can ask your question on Stackoverflow open a new issue, or DM me on Twitter @abranhe.

New features?

I will try to implement newReducer() or newAction() that instead of creating that ouside of the package, just add a new action and the action lives on a global object inside of the package. It will also have default actions: like reset(). Please don't laugh, this is just me writing down ideas to come back later.

Idea example:

import { newAction } from 'reactjs-context';

newAction({ 
  increment: () => {
    return dispatch({ type: 'increment' });
  },
});

License

MIT © Carlos Abraham. React logo belongs to Facebook Inc.