Need help with contextism?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Aslemammad
142 Stars 3 Forks 67 Commits 12 Opened issues

Description

😍 Use React Context better.

Services available

!
?

Need anything else?

Contributors list

# 140,190
C
Shell
React
react-c...
58 commits
# 131,343
CSS
Objecti...
iOS
React N...
4 commits
# 15,369
inverse...
Tensorf...
c-plus-...
cpp11
1 commit
# 117,573
HTML
covid19
React
reactjs
1 commit

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

picker

Read this article to become familiar with the idea.

Installation 🔥

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 ✋

// 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 (
    <provider state="{state}" dispatch="{dispatch}">
        // Components you want to use the state there.
        <div></div>
    </provider>
)

}

// 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
// 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 ( <countstatecontext.provider value="{state}"> <countdispatchcontext.provider value="{dispatch}"> {children} </countdispatchcontext.provider> </countstatecontext.provider> ) } // 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.

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.

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.