# redux-devtools-inspector
> Redux DevTools Diff Monitor
Latest version **0.14.0** (published 2020-09-07) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install redux-devtools-inspector
pnpm add redux-devtools-inspector
yarn add redux-devtools-inspector
bun add redux-devtools-inspector
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 0.14.0 |
| Published | 2020-09-07 |
| First published | 2016-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 315.7 KB |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 14367 |
| Author | Alexander |
| Maintainers | timdorr, alexkuz, zalmoxisus, methuselah96 |
## Links
- npm: https://www.npmjs.com/package/redux-devtools-inspector
- Repository: https://github.com/reduxjs/redux-devtools
- Homepage: https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-inspector
- Issues: https://github.com/reduxjs/redux-devtools/issues
- npm.io page: https://npm.io/package/redux-devtools-inspector
## Dependencies (14)
- [jss](https://npm.io/package/jss.md) ^10.3.0
- [hex-rgba](https://npm.io/package/hex-rgba.md) ^1.0.2
- [dateformat](https://npm.io/package/dateformat.md) ^3.0.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [jsondiffpatch](https://npm.io/package/jsondiffpatch.md) ^0.4.1
- [react-dragula](https://npm.io/package/react-dragula.md) ^1.1.17
- [@types/dragula](https://npm.io/package/@types/dragula.md) ^3.7.0
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [react-json-tree](https://npm.io/package/react-json-tree.md) ^0.13.0
- [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^15.7.3
- [jss-preset-default](https://npm.io/package/jss-preset-default.md) ^10.3.0
- [javascript-stringify](https://npm.io/package/javascript-stringify.md) ^2.0.1
- [react-base16-styling](https://npm.io/package/react-base16-styling.md) ^0.8.0
- [redux-devtools-themes](https://npm.io/package/redux-devtools-themes.md) ^1.0.0
## Recent versions
- 0.14.0 (latest) — 2020-09-07
- 0.13.1 — 2020-08-14
- 0.13.0 — 2020-08-02
- 0.12.1 — 2020-07-31
- 0.12.0 — 2020-07-31
- 0.11.3 — 2017-03-05
- 0.11.2 — 2017-02-19
- 0.11.0 — 2017-01-26
- 0.10.0 — 2017-01-11
- 0.9.4 — 2016-11-20
- 0.9.3 — 2016-11-19
- 0.9.2 — 2016-11-18
- 0.9.1 — 2016-11-13
- 0.9.0 — 2016-11-08
- 0.8.0 — 2016-08-05
- … 25 more at https://npm.io/package/redux-devtools-inspector/versions
## README
# redux-devtools-inspector
[](https://badge.fury.io/js/redux-devtools-inspector)
A state monitor for [Redux DevTools](https://github.com/reduxjs/redux-devtools) that provides a convenient way to inspect "real world" app states that could be complicated and deeply nested. Created by [@alexkuz](https://github.com/alexkuz) and merged from [`alexkuz/redux-devtools-inspector`](https://github.com/alexkuz/redux-devtools-inspector) into [`reduxjs/redux-devtools` monorepo](https://github.com/reduxjs/redux-devtools).
### Installation
```
npm install --save-dev redux-devtools-inspector
```
### Usage
You can use `Inspector` as the only monitor in your app:
##### `containers/DevTools.js`
```js
import React from 'react';
import { createDevTools } from 'redux-devtools';
import Inspector from 'redux-devtools-inspector';
export default createDevTools();
```
Then you can render `` to any place inside app or even into a separate popup window.
Alternative, you can use it together with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor) to make it dockable.
Consult the [`DockMonitor` README](https://github.com/gaearon/redux-devtools-dock-monitor) for details of this approach.
[Read how to start using Redux DevTools.](https://github.com/gaearon/redux-devtools)
### Features
The inspector displays a list of actions and a preview panel which shows the state after the selected action and a diff with the previous state. If no actions are selected, the last state is shown.
You may pin a certain part of the state to only track its changes.
### Props
| Name | Type | Description |
| -------------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `theme` | Object or string | Contains either [base16](https://github.com/chriskempson/base16) theme name or object, that can be `base16` colors map or object containing classnames or styles. |
| `invertTheme` | Boolean | Inverts theme color luminance, making light theme out of dark theme and vice versa. |
| `supportImmutable` | Boolean | Better `Immutable` rendering in `Diff` (can affect performance if state has huge objects/arrays). `false` by default. |
| `tabs` | Array or function | Overrides list of tabs (see below) |
| `diffObjectHash` | Function | Optional callback for better array handling in diffs (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch/blob/master/docs/arrays.md)) |
| `diffPropertyFilter` | Function | Optional callback for ignoring particular props in diff (see [jsondiffpatch docs](https://github.com/benjamine/jsondiffpatch#options)) |
If `tabs` is a function, it receives a list of default tabs and should return updated list, for example:
```
defaultTabs => [...defaultTabs, { name: 'My Tab', component: MyTab }]
```
If `tabs` is an array, only provided tabs are rendered.
`component` is provided with `action` and other props, see [`ActionPreview.jsx`](src/ActionPreview.jsx#L42) for reference.
Usage example: [`redux-devtools-test-generator`](https://github.com/zalmoxisus/redux-devtools-test-generator#containersdevtoolsjs).
### License
MIT
---
_Source: https://npm.io/package/redux-devtools-inspector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._