https://github.com/pakholeung37/create-context-helper
Create react context especially atomic context without painless.
https://github.com/pakholeung37/create-context-helper
react react-context react-hooks reactjs state-management
Last synced: 3 months ago
JSON representation
Create react context especially atomic context without painless.
- Host: GitHub
- URL: https://github.com/pakholeung37/create-context-helper
- Owner: pakholeung37
- License: mit
- Created: 2022-05-10T12:10:04.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2022-08-31T03:30:52.000Z (almost 3 years ago)
- Last Synced: 2024-04-19T10:26:15.292Z (about 1 year ago)
- Topics: react, react-context, react-hooks, reactjs, state-management
- Language: TypeScript
- Homepage:
- Size: 35.2 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Create Context Helper
Create react context especially atomic context without painless.
With Atomic Context your component will only re-render based on atomic value changes but not the whole value you provide in a common pattern. It's simple to use and more powerful. [check](#createAtomicContextHelper)
[](https://npmjs.org/package/create-context-helper/)
## Install
```bash
$ yarn add create-context-helper
# or
$ npm i create-context-helper
```
## Usage
This library provide `createContextHelper` to create a common pattern Context And `createAtomicContextHelper` to create atomic Context.
### createContextHelper
```typescript
import { createContextHelper } from 'create-context-helper'
const [FooBarProvider, useFooBar] = createContextHelper<{
foo: string
bar: string
}>('FooBar', {
foo: '',
bar: '',
})
const App = () => {
return (
)
}
const Comp = () => {
const { foo, bar } = useFoo()
return (
{foo} {bar} // hello world
)
}
```
### createAtomicContextHelper
```typescript
import { createAtomicContextHelper } from 'create-context-helper'
const [FooBarProvider, useFooBar] = createAtomicContextHelper<{
foo: string
bar: string
}>('FooBar', {
foo: '',
bar: '',
})
const App = () => {
return (
)
}
const Comp = () => {
const { foo } = useFooBar(['foo'])
return
{foo} // hello
}
```
Simple as `createContextHelper`, but more powerful. Your context now becomes atomic which means now taking `useFoo(['foo'])` for value `foo`, the component will only change when `foo` changes.
`createAtomicContextHelper` will generate a provider tree for you like this
```typescript
```
And with selector `['foo']` in hook `useFooBar`, the `FooBarProvider` will only collects `FooBar.foo.Context` for you. which means `` only re-render when `foo` changes.
## Reference
```typescript
export const createContextHelper = <
ContextType,
ProviderProps extends Partial = Partial,
>(
// prefix for provider displayName
prefix: string,
// context defaultValue
defaultValue: ContextType,
): [
// provider
React.FC,
// use hook
() => ContextType,
// context
React.Context
]
export const createAtomicContextHelper = <
ContextType extends { [s: string]: any },
ProviderProps extends Partial = Partial,
K extends keyof ContextType = keyof ContextType,
>(
// prefix for provider displayName
prefix: string,
// context defaultValue
defaultValue: ContextType,
): [
// provider
React.FC,
// use hook
(selector?: T) => Pick,
// contextMap
Record>,
]
```
## Limitation
There is no magic in `createAtomicContextHelper`, It only separates shallow values in the original Provider into smaller providers. Inside `createAtomicContextHelper`, it calls `useContext` conditional depends on selector. So dynamic selector is not allowed. if don't, it will cause a serious render problem(`createAtomicContextHelper` handles this scenario by using the first selector).
## License
[MIT](LICENSE)