1.0.2 • Published 2 years ago
react-provide-context v1.0.2
react-provide-context
Simple lightweight context based react state management with typescript support
npm i react-provide-context
CreateContext:
Use CreateContext to get a provider and reducer/state hooks
CreateContext requires initialState and a reducer as props.
import CreateContext from 'react-provide-context';
type State = { shiny: boolean; dark: boolean };
const initialState: State = { shiny: false, dark: false };
function styleReducer(state: State, action): State {
switch (action.type) {
case 'toggleShiny': {
return { ...state, shiny: !state.shiny };
}
case 'toggleDark': {
return { ...state, dark: !state.dark };
}
default: {
throw new Error(`Unhandled action type`);
}
}
}
const Context = CreateContext(initialState, styleReducer);
export const StyleProvider = Context.ContextProvider;
export const useStyleState = Context.useContextState;
export const useStyleDispatch = Context.useContextDispatch;
export const useStyle = Context.useContextReducer;
The returned context has properties:
- ContextProvider: Provider that will wrap the components context hooks will be usable in
- useContextState: Current state of the provided context
- useContextDispatch: Function used to dispatch updates
- useContextReducer: Both dispatch and state in tuple form like useReducer
CreateContext can also be provided an actions object
import CreateContext from 'react-provide-context';
type State = { pageA: number; pageB: string };
const initialState: State = { pageA: 0, pageB: '0' };
function pageReducer(state: State, action): State {
switch (action.type) {
case 'setPageA': {
return { ...state, pageA: action.value };
}
case 'setPageB': {
return { ...state, pageB: action.value };
}
default: {
throw new Error(`Unhandled action type`);
}
}
}
const actions = (dispatch) => ({
setPageA: (value: number) => dispatch({ type: 'setPageA', value }),
setPageB: (value: string) => dispatch({ type: 'setPageB', value }),
});
const Context = CreateContext(initialState, pageReducer, actions);
export const usePageActions = Context.useContextActions;
export const usePage = Context.useContext;
When actions are provided the returned context has additional properties:
- useContextActions: An object of predefined functions used to update the context state
- useContext: Current state of the provided context plus actions above in tuple form
useContext example using usePage hook created above
const [{ pageB }, { setPageB }] = usePage();
useMetaReducer:
useMetaReducer can be used to add MetaReducers to all reducer used by CreateContext useMetaReducer takes CreateContext and an array of MetaReducers and returns a new CreateContext function
Logging example below
import CreateContext, { useMetaReducers } from 'react-provide-context';
const logger = (reducer) => {
return (state, action) => {
const nextState = reducer(state, action);
console.group(action.type);
console.log(`%c prev state`, `color: #DD4533; font-weight: bold`, state);
console.log(`%c action`, `color: #9D457A; font-weight: bold`, action);
console.log(`%c next state`, `color: #5BBC34; font-weight: bold`, nextState);
console.groupEnd();
return nextState;
};
};
export default useMetaReducers(CreateContext, [logger]);