https://github.com/zixicat/easy-create-react-context
The tool just encapsulated React.createContext, you can also think of it as my personal black-tech small tool. Hope you enjoy it.
https://github.com/zixicat/easy-create-react-context
context data-flow mobx react reactjs
Last synced: 10 months ago
JSON representation
The tool just encapsulated React.createContext, you can also think of it as my personal black-tech small tool. Hope you enjoy it.
- Host: GitHub
- URL: https://github.com/zixicat/easy-create-react-context
- Owner: zixiCat
- License: mit
- Created: 2020-12-01T11:39:35.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-17T11:36:50.000Z (over 5 years ago)
- Last Synced: 2025-08-03T00:56:33.030Z (10 months ago)
- Topics: context, data-flow, mobx, react, reactjs
- Language: TypeScript
- Homepage:
- Size: 29.3 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# easy-create-react-context
[](https://www.npmjs.com/package/easy-create-react-context)
The tool just encapsulated React.createContext, but it's
**more efficient**,
**more convenient** when compared to `Reducer + Context` such a combination and
**easier** to manage the state of small modules.
You can think of it as mini version of **MobX**, but with the same rendering efficiency.
You can also think of it as my personal black-tech small tool. Hope you enjoy it.
### [DEMO](https://codesandbox.io/s/easy-create-react-context-h46xx)
## Installation
- YARN
```bash
yarn add easy-create-react-context
```
- NPM
```bash
npm i easy-create-react-context
```
## Quick Start
- Create context by invoking `getConTexts`, Use `Provider` to set `contexts` and `value`.
- Call `updateAsync` of `contexts` that we declared to run some asynchronous functions.
```typescript jsx
import { getConTexts, Provider } from 'easy-create-react-context';
type TExample = InstanceType;
const contexts = getConTexts();
class Example {
a = 1;
b(num: number) {
this.a += num;
}
c(num: number) {
contexts.updateAsync((update) => {
setTimeout(() => {
this.a += num;
update();
}, 500);
});
}
}
const Parent = () => {
return (
contexts={contexts} value={new Example()}>
);
};
```
- Invoke `useContext` and use `contexts.getContext` as param.(if you prefer class component, use `contexts.getContext('key').Consumer` instead)
- Call `context.dispatch` to update data.
```typescript jsx
const Child = () => {
const a = useContext(contexts.getContext('a'));
return (
<>
{a}
contexts.dispatch({ type: 'b', params: [1] })}>
update
contexts.dispatch("c", 1)}>
async update
>
);
};
```
## API
#### getConTexts
```typescript jsx
const contexts = getConTexts()
```
Used to create context, see also following which is related content of `contexts`.
#### Provider
```typescript jsx
...
```
Provider data for children.
- contexts: object (required)
- value: object (required)
#### context.getContext
```js
const value = React.useContext(context.getContext(key))
```
Obtain current value of the `value` in `Provider`.
- key: string (required)
#### context.dispatch
```js
context.dispatch({type: key, params: argsArray})
// or for short
context.dispatch(key, arg1, arg2, ...argN)
// or used to return something that is return statement of the property of instance
return context.dispatch(key)
```
Invoke function of value in `Provider` and render related components, you can also use it to return what is return statement of the property of instance.
- key: string (required)
- argsArray: Array (optional)
- argN: the NTH param
#### context.updateAsync
```js
contexts.updateAsync(update=>{ update() })
```
Used to run asynchronous code.
- update: function (required)
## Bug tracker
If you find a bug, please report it [here on Github](https://github.com/zixiCat/easy-create-react-context/issues)!