https://github.com/dgpedro/react-pretty-context
Simple and easy way to manage react context state
https://github.com/dgpedro/react-pretty-context
actions context context-selector dispatcher hooks react react-context
Last synced: about 1 year ago
JSON representation
Simple and easy way to manage react context state
- Host: GitHub
- URL: https://github.com/dgpedro/react-pretty-context
- Owner: dgpedro
- License: mit
- Created: 2021-02-17T19:58:00.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2021-03-03T22:44:25.000Z (about 5 years ago)
- Last Synced: 2024-04-24T18:08:14.055Z (about 2 years ago)
- Topics: actions, context, context-selector, dispatcher, hooks, react, react-context
- Language: TypeScript
- Homepage:
- Size: 306 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-pretty-context
Simple and easy way to manage react context state.
This package makes use of [use-context-selector](https://github.com/dai-shi/use-context-selector#use-context-selector) and allows context state updates by dispatching defined actions.
## Install
---
**NOTE**: _As mentioned in [use-context-selector](https://github.com/dai-shi/use-context-selector#install) it's also required to install peer dependencies:_
```
npm install --save react-pretty-context react scheduler
```
---
## Usage
`context-config.js`
```javascript
import { createContext } from "react-pretty-context";
// Context object that will be used as default
const initialContext = {
firstName: "Default first name",
lastName: "Default last name",
};
// Defined actions that perform context state updates
// For every action the first argument is always the current context object
// Every action returns a new context object updated or the current one
const actions = {
setFirstName: (context, firstName) => {
// New object which reflects the update
return { ...context, firstName };
},
setLastName: (context, lastName) => {
// Context update can be avoided by returning current context object
if (context.firstName === "foo") {
return context;
}
return { ...context, lastName };
},
};
export const {
ContextProvider, // Context provider
defaultContext, // For convenience :)
useActions, // Hook to access actions object
useContextSelector, // Hook to select context using a selector function
} = createContext({
actions,
defaultContext: initialContext,
});
```
`some-component.jsx`
```javascript
import React from "react";
import { ContextProvider } from "./context-config";
const SomeComponent = () => {
return (
);
}
```
`personal-details.jsx`
```javascript
import React from "react";
import { useContextSelector, useActions } from "./context-config";
const PersonalDetails = () => {
// useContextSelector accepts as first argument the context selector function
// Only when the return value/reference changes, the component updates
const firstName = useContextSelector((context) => context.firstName);
const lastName = useContextSelector((context) => context.lastName);
// Direct access to context dispatch actions
const { setFirstName, setLastName } = useActions();
const onChangeFirstName = (ev) => {
// Dispatch action
setFirstName(ev.target.value);
};
const onChangeLastName = (ev) => {
// Dispatch action
setLastName(ev.target.value);
};
return (
First name:
Last name:
);
};
```
## Demo
Simple demo can be found [here](https://dgpedro.github.io/react-pretty-context/).