reinspect-revived

Connect React state hooks (useState and useReducer) to Redux DevTools — updated for React 18/19 and modern TypeScript.

Forked from reinspect by Thomas Roch. This fork (reinspect-revived) modernizes the original library with React 18/19 support, TypeScript 5, and removes the runtime Redux dependency.

Installation

npm install reinspect-revived
# or
yarn add reinspect-revived

Requires React >=18. You also need the Redux DevTools browser extension.

Why?

Hooks are great for local state. Redux DevTools are great for inspecting state changes. Why not both?

This package connects useState and useReducer to Redux DevTools so you can:

• Inspect actions and state for each hook
• Time travel through state changes
• Hot reload: save your current state and re-inject it on re-render

API

<StateInspector>

A provider that hooks inside it report to. Wrap your app (or a subtree) with it.

import { StateInspector } from "reinspect-revived"

function AppWrapper() {
  return (
    <StateInspector name="App">
      <App />
    </StateInspector>
  )
}

Props:

• name?: string — label shown in DevTools (default: "React state")
• initialState?: any — optional preloaded state

You can nest multiple StateInspector instances; hooks connect to the nearest one.

Without a StateInspector ancestor, useState and useReducer from this package behave identically to React's built-ins.

useState(initialState, id?)

Drop-in replacement for React.useState. Pass an id to connect it to DevTools.

import { useState } from "reinspect-revived"

function Counter({ id }: { id: string }) {
  const [count, setCount] = useState(0, id)

  return (
    <div>
      <button onClick={() => setCount(c => c - 1)}>-</button>
      {count}
      <button onClick={() => setCount(c => c + 1)}>+</button>
    </div>
  )
}

useReducer(reducer, initialState, initializer?, id?)

Drop-in replacement for React.useReducer. Pass an id to connect it to DevTools.

import { useReducer } from "reinspect-revived"

function Counter({ id }: { id: string }) {
  const [state, dispatch] = useReducer(reducer, { count: 0 }, id)
  // ...
}

If no id is supplied the hook falls back to React.useReducer.

Credits

Original library: reinspect by Thomas Roch — MIT licensed.

This fork is maintained by FlightlessCoder.