https://github.com/Aslemammad/contextism
😍 Use React Context better.
https://github.com/Aslemammad/contextism
context react reactjs state state-management
Last synced: 12 months ago
JSON representation
😍 Use React Context better.
- Host: GitHub
- URL: https://github.com/Aslemammad/contextism
- Owner: Aslemammad
- Created: 2020-07-26T12:59:59.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-13T09:35:36.000Z (over 3 years ago)
- Last Synced: 2024-10-29T21:51:51.347Z (over 1 year ago)
- Topics: context, react, reactjs, state, state-management
- Language: TypeScript
- Homepage: https://opencollective.com/contextism
- Size: 3.35 MB
- Stars: 142
- Watchers: 3
- Forks: 3
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Contextism 🤩 is a new way to use React Context better.
Read
this
article to become familiar with the idea.
## Installation 🔥
```bash
npm i contextism
// or
yarn add contextism
```
## Usage ✏️
We have two ways to use Contextism, Creating store using it or using its hooks directly:
### #1 createStore ✋
```js
// store.js
import { createStore } from "contextism"
const context = createStore("default value for state")
export const {
Provider,
useDispatchContext,
useStateContext,
useStore,
} = context
// App.jsx
import Div from "./Div"
import { Provider } from "./store"
const App = () => {
const [state, dispatch] = React.useState("Value for state") // or useReducer
return (
// Components you want to use the state there.
)
}
// Div.jsx
import { useStateContext, useDispatchContext, useStore } from "./store"
const Div = () => {
const state = useStateContext() // "Value for state"
const dispatch = useDispatchContext() // dispatch function (setState) in App
// or better one
const [state, dispatch] = useStore()
//return ...
}
```
When we create store using Contextism, it gives us 3 hooks :
- **useStateContext**: the state value that we gave it to state prop in Provider component
- **useDispatchContext**: the setState function or useReducer dispatch that we passed it to dispatch prop
- **useStore**: returns us an array with two values of the above hooks; `[ useStateContext, useDispatchContext ]`
***NOTE***: you should use these hooks( methods of createStore function) in child components of *Provider* component.
### #2 default hooks ✋
Contextism has two hooks beside createStore function:
- **useContext**: takes a React context and returns the value
- **useStore**: takes two React contexts and returns two values of them, the same thing like in the above way but with two arguments
```js
// Store.jsx
export const CountStateContext = React.createContext()
export const CountDispatchContext = React.createContext()
function countReducer(state, action) {
//...
}
export function CountProvider({ children }) {
const [state, dispatch] = React.useReducer(countReducer, { count: 0 })
return (
{children}
)
}
// App.jsx
import { CountProvider } from "./Store"
import Div from "./Div"
export function App() {
return (
)
}
// Div.jsx
import { CountStateContext, CountDispatchContext } from "./Store"
import { useContext, useStore } from "contextism"
export function Div() {
const state = useContext(CountStateContext)
const dispatch = useContext(CountDispatchContext)
// Or much better:
const [state, dispatch] = useStore(CountStateContext, CountDispatchContext)
//return ...
}
```
## Typescript 🔷
Contextism has Typescript support like generics and ... . in **createStore** you can pass two generics too, first one for the state structure and interface, the second one for the useReducer hook.
```ts
type Action = { type: "increment" } | { type: "decrement" }
type State = { count: number }
// The second generic is for useReducer Action
const context = createStore()
// For useState just pass the first generic (State interface generic)
const context = createStore()
```
## Donation
You can support me and my projects with [Open Collective](https://opencollective.com/contextism).
## Contribution
I'm developer, not a perfect person, so I make many mistakes, it means that be free to create issues and then PRs.
## Thanks ❤️
Special thanks for contributing and using this project.