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

Example Demo

Example usinguseReducer

Detailed example can beseen here

// Libraryimport 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>  );}