What is context?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
But you can use context-api
as a global state management tool, there are lots of complex libraries (Redux
, mobx
,Recoil
,HookState
and many more...) for managing state in React.js
application.
Why i built this library?
Because i liked React.js
and building some web app for my personal use during my journey i have lots of problems. but i never give up. And this attitude reached me here now i am learning typescript
but my methods for learing coding is practice and for deep dive in typescript
i converted my previous web app to typescript
so now i can able to doing basic things from this.
And for knowing more things in technology era i loved to learn something everyday.
How to Start
To intigrate mini-state
in your projects you need to install using npm
after install follow these examples.
npm install mini-state
createCTX
This is usally like as React.createContext
but here you don't need hard code.
You only need 2 steps to creating your context super fast
- step 1
You need to import createCTX
import {createCTX} from "mini-state"
- step 2
Now creating context via createCTX
with the type of useState
Hook
const [Context , Provider] = createCTX({
type:'useState'
initialState:0
})
Now your context is created you can create context globally in your .jsx
or .tsx
files
- example
src/index.js
// Import related modules
import { createCTX, useCTX } from 'mini-state';
// Creating context and provider using createCTX
const [Context , Provider] = createCTX({
type:'useState'
initialState:0
})
// Component
const App = () => {
/*
* Here we are using state using built in Hook
* `useCTX`
*/
const { state, dispatch } = useCTX(Context)
console.log('State output in numbers', state);
return (
<button onClick={() => dispatch(2000)}>
<h1>Here State Value {state}</h1>
</button>
)
}
// Our Application Root
const Root: React.FC = () => {
return (
<Provider>
<App />
</Provider>
)
}
const div = document.createElement('div');
ReactDOM.render(<Root />, div);
});
createCTX options
- type
- reducer
- initialState
useCtx
This Hook provide a way to use Context
value
const { state, dispatch } = useCTX(Context)
createSlice
When you work with type="useReducer"
you need to pass more value in createCtx
- type
- reducer
- initialState
createSlice
is a way to creating initialState
, reducer
and actions
for more large state and this function provide better way to create all in one place.
import { createSlice } from "mini-state"
and then call this function below in example
const slice = createSlice({
displayName: "Basic Slice",
intialState: [],
reducer: (state, action: ActionTypes) => {
switch (action.type) {
case "ADD::TODO":
return [...state, action.payload]
case "REMOVE::TODO":
return state.filter((id) => id !== action.payload)
default:
return state
}
},
actions: {
addTodo: (payload) => ({ type: "ADD::TODO", payload }),
removeTodo: (payload) => ({ type: "REMOVE::TODO", payload }),
}
})
export const { intialState, reducer, actions } = slice
Here we are creating context with type of useReducer
Hook
Usage of both same but when you dispatch something best way to use actions
creators for easy and clean work
const [Context, Provider] = createCTX({
type: 'useReducer',
initialState: intialState
reducer: reducer
})
Usage with React.js
Core Functanality is same for both React.js
and Next.js
but you need wrap your web app with Provider
created by createCTX
.
Folder Structure
Folder Structure in Both Framework
or Library
are different like in React.js
Folder structure like this
- Your Directory ( root dir )
- public
favicon.ico
robots.txt
index.html
- node_modules
- src
index.js
app.js
.env
.gitignore
tsconfig.json
package.json
- public
Usage with Next.js
Core Functanality is same for both React.js
and Next.js
but you need wrap your web app with Provider
created by createCTX
.
Folder Structure
Folder Structure in Both Framework
or Library
are different like in Next.js
Folder structure like this
-
Your Directory ( root dir )
- node_modules
- public
- assets
- static
favicon.ico
robots.txt
- pages
- _app.js
- _document.js
- _404.js
- index.js
-
.env
-
.gitignore
-
tsconfig.json
-
package.json
"# mini-state" "# mini-state" "# mini-state"