Contextism 🤩 is a new way to use React Context better.

picker

Read this article to become familiar with the idea.

![Downloads](https://img.shields.io/npm/dw/contextism) ![Size](https://img.shields.io/bundlephobia/minzip/contextism?label=Min) ![License](https://img.shields.io/npm/l/contextism)
## 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 ✋ ```javascript // 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 ```javascript // 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. ```javascript 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(); ``` ## Contribution I'm developer, not a perfect person, so I make much mistakes, it means that be free to create issues and then PRs.
## Thanks ❤️ Special thanks for contributing and using this project.