https://github.com/aadilhasan/react-ctx-store
A React context wrapper, which makes context more performant, scalable, and easy to use.
https://github.com/aadilhasan/react-ctx-store
context context-store react react-context react-context-store react-native state-management
Last synced: 2 months ago
JSON representation
A React context wrapper, which makes context more performant, scalable, and easy to use.
- Host: GitHub
- URL: https://github.com/aadilhasan/react-ctx-store
- Owner: aadilhasan
- Created: 2021-07-03T11:39:35.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-07-08T10:28:56.000Z (almost 5 years ago)
- Last Synced: 2025-02-16T22:18:35.011Z (over 1 year ago)
- Topics: context, context-store, react, react-context, react-context-store, react-native, state-management
- Language: TypeScript
- Homepage:
- Size: 302 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-ctx-store
> A React context wrapper, which makes context more performant, scalable and easy to use.
## Why?
React context is good, but it is not good for medium to big projects, it has following problems:
- re-rendering, context re-renders all the subscriber doesn't matter if the subscriber is using the updated property or not.
- scalability, context has this re-rendering issue, one single store is not possible so multiple context are required.
- there is not simple way to update the context, it requires a bit of extra code.
[](https://www.npmjs.com/package/react-ctx-store) [](https://standardjs.com)
## Install
```bash
npm install --save react-ctx-store
```
### Usage
```tsx
import React, { Component } from 'react'
import { createContext } from 'react-ctx-store'
const store = {
count: 0,
}
const updaters = {
updateCount: (store) => {
return {
count: store.count + 1;
}
}
}
const {Consumer, Provider} = createContext(store, updaters)
function CounterComponent ({count, updateCount}) {
return (
{count}
update count
)
}
export function ExampleApp (){
return (
)
}
```
### API
```tsx
import { creatContext } from 'react-ctx-store'
const store = {
count: 0,
}
// an object of where every key should be an string and value should be a function which will update the store
const updaters = {
updateCount: (store, ...rest) => {
return {
count: store.count + 1;
}
}
}
const { Consumer, Provider, connect, useStore, _context } = createContext(
store,
updaters
)
```
`react-ctx-store` exports one single method `createContext` which takes 2 arguments
- Store - a javascript object.
- Updaters - an object of functions, only these functions can update the store, every updater function receives store as the first argument, and rest of the argument can be passed by the caller function. To update the store updater function will have to return an updated store value.
`createContext` method returns following Components and methods:
#### 1. Provider
A React component which allows consuming components to subscribe to a context changes, similar to React Context Provider.
Usage:
```tsx
function Example() {
return (
/* children of the Provider will have access to store and updaters using Provider Component */
)
}
```
#### 2. Consumer
A React Component that can subscribe to the values of the store/context.
Consumer takes a single prop `mapContextToProps` which takes an array of properties or a callback function as value.
Usage:
```tsx
/* all direct children of Consumer component will receive count as a prop */
...
```
or
```tsx
/* all direct children of Consumer component will receive totalCount as a prop */
{totalCount: count * 10})}>
...
```
#### 3. Connect
A method which lets you subscribe to the values of the store/context.
Usage:
```tsx
/* Component will receive count as a prop*/
const App = connect(['count'])(Component)
```
or
```tsx
/* Component will receive count as a prop*/
const App = connect((store) => {count: store.count, update: store.updateCount})(Component)
```
#### 3. useStore
A hook, which returns store and updaters.
Note: the component using useStore hook will re-render if any value changes in the store.
```tsx
function WithHooks() {
const { count, updateCount } = useStore()
return (
{count}
Update Count
)
}
```
#### 4. \_context
A React Context object which is internally being used to store the values, it is exposted in case a user wants to have access to original Context.
### Examples
#### Async operation in updaters
```tsx
import { createContext } from 'react-ctx-store'
const store = {
userData: null
}
const updaters = {
fetchUserData: async (store, userId) => {
const userData = await fetch('.../user/' + userId)
return { userData }
}
}
const { Consumer, Provider } = createContext(store, updaters)
function UserProfile({ userData, fetchUserData }) {
useEffect(() => {
fetchUserData('123')
}, [])
return
UserName: {userData.name}
}
export function App() {
return (
)
}
```
## License
MIT © [aadilhasan](https://github.com/aadilhasan)