Remote Context API - DevTools Extension

npm install --save-dev-exact context-api-dev-tools-extension

Example Demo

Example using useReducer

Detailed example can be seen here

// Library
import useContextDevTools from 'context-api-dev-tools-extension';
export function TodosContextProvider({
 children
}: {
 children: React.ReactNode;
}) {
 // Define reducer
 const [todos, dispatch] = useReducer(todosReducer, initialState);
 
 // Initialize DevTools Extension
 const devTools = useContextDevTools(dispatch);
 
 // Update devtools to send updated state
 useEffect(() => {
 devTools.sendUpdatedState(todos);
 }, [todos, devTools]);
 
 // Mount provider with state context
 return (
 <TodosDispatchContext.Provider value={devTools.sendDispatch}>
 <TodosStateContext.Provider value={todos}>
 {children}
 </TodosStateContext.Provider>
 </TodosDispatchContext.Provider>
 );
}