https://github.com/abranhe/reactjs-context
The fastest way to start working with React Context API
https://github.com/abranhe/reactjs-context
helper react react-context react-context-api reducer
Last synced: 9 months ago
JSON representation
The fastest way to start working with React Context API
- Host: GitHub
- URL: https://github.com/abranhe/reactjs-context
- Owner: abranhe
- License: mit
- Created: 2019-12-30T21:19:02.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-03T20:56:25.000Z (over 1 year ago)
- Last Synced: 2025-03-18T13:27:49.299Z (9 months ago)
- Topics: helper, react, react-context, react-context-api, reducer
- Language: JavaScript
- Homepage: https://p.abranhe.com/reactjs-context
- Size: 11.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- Funding: .github/funding.yml
- License: license
Awesome Lists containing this project
README
[
](https://p.abranhe.com/reactjs-context)
# reactjs-context
[](https://github.com/abranhe/reactjs-context/actions) [](https://travis-ci.org/abranhe/reactjs-context) [](https://github.com/abranhe/reactjs-context/blob/master/license) [](https://github.com/abranhe/reactjs-context)
Reactjs-Context (`reactjs-context`) is a simple library made to easily work with [React Context API](https://reactjs.org/docs/context.html); but why to use React Context API if [Redux](https://redux.js.org) exists?
Well,
[
](https://twitter.com/dan_abramov/status/1097866569701621763)
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](#install)
- [Usage](#usage)
- [Questions](#questions)
- [License](#license)
- [Demo](https://reactjs-context.demos.abranhe.com)
- [Demo source code](https://github.com/abranhe/public-demos/tree/master/reactjs-context)
## 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
```js
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 () => (
{({ state, dispatch }) => {
const { increment, decrement } = actions(dispatch);
return (
{state.counter}
decrement()}>-
increment()}>+
);
}}
);
```
Otherwise you can use `connect()` to access the global state via props.
```js
import { Provider } from 'reactjs-context';
import Counter from './counter';
export default () => (
);
```
Inside `counter.js`
```js
import { connect } from 'reactjs-context';
export default connect(({ context: {state, dispatch} }) => {
const { increment, decrement } = actions(dispatch);
return (
{state.counter}
decrement()}>-
increment()}>+
);
});
```
This is a simple demo demostrating the usage of `reactjs-context` with a countere demo.
[
](https://reactjs-context.demos.abranhe.com)
## Questions?
You can ask your question on [Stackoverflow](https://stackoverflow.com) open a new issue, or DM me on Twitter [@abranhe](https://twitter.com/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:
```js
import { newAction } from 'reactjs-context';
newAction({
increment: () => {
return dispatch({ type: 'increment' });
},
});
```
## License
MIT © [Carlos Abraham](https://github.com/abranhe). React logo belongs to Facebook Inc.