https://github.com/ericfong/create-mutable-context
wrap new React.createContext() to provide context with setState function for Consumer
https://github.com/ericfong/create-mutable-context
context mutable react
Last synced: 10 days ago
JSON representation
wrap new React.createContext() to provide context with setState function for Consumer
- Host: GitHub
- URL: https://github.com/ericfong/create-mutable-context
- Owner: ericfong
- Created: 2018-03-17T09:36:37.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-03-24T05:17:30.000Z (about 8 years ago)
- Last Synced: 2025-10-23T14:02:41.803Z (6 months ago)
- Topics: context, mutable, react
- Language: JavaScript
- Homepage:
- Size: 104 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
really minimal wrap on new React.createContext() to provide context with a set function for Consumer
# NOTE
According to [0002-new-version-of-context](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md#relies-on-strict-comparison-of-context-values), mutation is discouraged. But in some situations, Consumer really need a way to update the Provider. So, I come up with this module.
# Usage
```js
import createMutableContext from 'create-mutable-context'
const { Provider, Consumer } = createMutableContext()
{ctx => {
// ctx contain value and a set function
return (
ctx.set(ctx.value + 1)}>
{ctx.value}
)
}}
```
## ctx.set()
```js
set(updater[, callback])
```
set function interface is similar to react component's setState(), which accept updater as `object` or `function`.
updater as function with the signature:
```js
(prevValue, providerProps) => newValue
```
**set will just replace the value. It will NOT merge newValue to prevValue.**
## keep value in your own state by Provider.onChange
you can also keep value in your own state (like Input)
```js
import createMutableContext from 'create-mutable-context'
const { Provider, Consumer } = createMutableContext()
class App extends React.Component {
state = { valueA: 1 }
render() {
return (
this.setState({ valueA })}
>
...
)
}
}
```
## access via ctx.foo instead ctx.value.foo
Can use `createStateMutext` to mutate whole provider state instead of a value field only.
```js
import { createStateMutext } from 'create-mutable-context'
const C = createStateMutext({ foo: 1 })
const App = () => (
{ctx => (
ctx.set({ foo: ctx.foo + 1 })}
>
{ctx.foo}
)}
)
```
## createObservableMutext
Consumers can observe part of changes easily by names. Names are auto calculate to bitmask
```js
import { createObservableMutext } from 'create-mutable-context'
const C = createObservableMutext({ foo: 0, bar: 0 }, { foo: {}, bar: {} })
const App = () => (
{ctx => `Foo: ${ctx.foo}`}
{ctx => `Bar: ${ctx.bar}`}
{ctx => `BarOrFoo: ${ctx.bar} ${ctx.foo}`}
)
```
## use option to add functions to ctx
createMutableContext signature:
```js
import createMutableContext from 'create-mutable-context'
const options = {
// init at the end of provider constructor
providerConstruct: (provider) => {},
// init at the end of consumer constructor
consumerConstruct: (consumer) => {},
// prepare ctx to pass to consumer children function
consumerCtx: (ctx, consumer) => ctx,
}
createMutableContext(defaultValue, calculateChangedBits, option)
const C = createMutableContext(defaultValue, null, {
providerConstruct(provider) {
Object.assign(provider.state, {
inc1() {
this.set(prevState => { value: prevState.value + 1 })
}
})
},
})
const App = () => (
{ctx => (
{ctx.value}
)}
)
```