Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dai-shi/react-context-global-state
[NOT MAINTAINED] Simple global state for React with Context API
https://github.com/dai-shi/react-context-global-state
context-api-react react state-management stateless-components typescript
Last synced: 19 days ago
JSON representation
[NOT MAINTAINED] Simple global state for React with Context API
- Host: GitHub
- URL: https://github.com/dai-shi/react-context-global-state
- Owner: dai-shi
- License: mit
- Created: 2018-10-04T13:18:49.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:38:23.000Z (almost 2 years ago)
- Last Synced: 2024-10-02T08:32:12.932Z (about 1 month ago)
- Topics: context-api-react, react, state-management, stateless-components, typescript
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-context-global-state
- Size: 814 KB
- Stars: 23
- Watchers: 3
- Forks: 2
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-state-management - react-context-global-state - A wrapper library around the Context API to define global state without explicitly using `class` components. (List)
- awesome-react-context - **react-context-global-state** - A wrapper library around the Context API to define global state without explicitly using `class` components. (Libraries)
README
# react-context-global-state
[](https://travis-ci.com/dai-shi/react-context-global-state)
[](https://badge.fury.io/js/react-context-global-state)
[](https://bundlephobia.com/result?p=react-context-global-state)
Simple global state for React with Context API
## Background
React v16.3 introduces a new Context API.
Context API allows to pass values down to a component tree
without explicit props.
In favor of writing all components stateless in "thisless" JavaScript,
this package is developed.
This package provides a simple way to define a global state
with Context API.
## Install
```bash
npm install react-context-global-state
```
## Usage
```javascript
import React from 'react';
import { createGlobalState } from 'react-context-global-state';
const initialState = { count: 0 };
const { StateProvider, StateConsumer } = createGlobalState(initialState);
const Counter = () => (
{(value, update) => (
Counter: {value}
update(v => v + 1)}>Click
)}
);
const App = () => (
);
```
## Examples
The [examples](examples) folder contains working examples.
You can run one of them with
```bash
PORT=8080 npm run examples:01_minimal
```
and open in your web browser.
You can also try them in codesandbox.io:
[01](https://codesandbox.io/s/github/dai-shi/react-context-global-state/tree/master/examples/01_minimal)
[02](https://codesandbox.io/s/github/dai-shi/react-context-global-state/tree/master/examples/02_typescript)
[03](https://codesandbox.io/s/github/dai-shi/react-context-global-state/tree/master/examples/03_actions)
[04](https://codesandbox.io/s/github/dai-shi/react-context-global-state/tree/master/examples/04_fetch)
[05](https://codesandbox.io/s/github/dai-shi/react-context-global-state/tree/master/examples/05_onmount)
## Reference
### Syntax
```
createGlobalState(initialState)
```
### Parameters
`initialState`: an object like `{ name1: value1, name2: value2, ... }`
### Return value
An object of `{ StateProvider, StateConsumer, setGlobalState }`
`StateProvider`: a component to provide entire state
`StateConsumer`: a component that receives a required `name` prop and invokes a child function prop whose signature is `(value, update) => {}` where `value` is the state value specified by the `name` and `update` is a function to update the value
The `update` function above is similar to `Component.prototype.setState`, and accepts either an updating function or a new value itself.
`setGlobalState`: a function to update a value in global state from outside of components. It recevies a `name` and a `update` value (or function).
`getGlobalState`: a function to get a value in global state from outside of components. It recevies a `name`.
## Blogs
- [React global state by Context API](https://blog.axlight.com/posts/react-global-state-by-context-api/)
- [React global state by Context API for TypeScript](https://blog.axlight.com/posts/react-global-state-by-context-api-for-typescript/)