# react-json-inspector

> React JSON inspector component

Latest version **7.1.1** (published 2017-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-json-inspector
pnpm add react-json-inspector
yarn add react-json-inspector
bun add react-json-inspector
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.1.1 |
| Published | 2017-11-13 |
| First published | 2014-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aziz Yuldoshev |
| Maintainers | lapple |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/react-json-inspector
- Repository: https://github.com/Lapple/react-json-inspector
- Homepage: https://github.com/Lapple/react-json-inspector#readme
- Issues: https://github.com/Lapple/react-json-inspector/issues
- npm.io page: https://npm.io/package/react-json-inspector

## Dependencies (5)

- [debounce](https://npm.io/package/debounce.md) 1.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [md5-o-matic](https://npm.io/package/md5-o-matic.md) ^0.1.1
- [object-assign](https://npm.io/package/object-assign.md) 2.0.0
- [create-react-class](https://npm.io/package/create-react-class.md) ^15.6.0

## Recent versions

- 7.1.1 (latest) — 2017-11-13
- 7.1.0 — 2017-09-14
- 7.0.1 — 2017-04-20
- 7.0.0 — 2016-04-23
- 6.1.3 — 2016-02-12
- 6.1.2 — 2016-02-05
- 6.1.1 — 2016-01-24
- 6.1.0 — 2016-01-18
- 5.4.0 — 2015-10-16
- 6.0.0 — 2015-10-16
- 5.3.0 — 2015-10-13
- 5.2.1 — 2015-08-12
- 5.2.0 — 2015-08-07
- 5.1.0 — 2015-06-13
- 5.0.3 — 2015-06-08
- … 29 more at https://npm.io/package/react-json-inspector/versions

## README

# React JSON Inspector Component

![Component screenshot](http://i.imgur.com/8619dv9.png)

React-based JSON inspector that features tree expansion and fast search.

[Live demo](https://lapple.github.io/react-json-inspector/)

### Installation

    npm install react-json-inspector

### Usage

```jsx
var Inspector = require('react-json-inspector');
var data = { /* ... */ };

React.render(
    <Inspector data={ data } />,
    document.getElementById('inspector')
);
```

Make sure to include `json-inspector.css` in your stylesheet. Feel free to
override or amend default styles, for instance, when using a dark background.

### Run the example

```bash
cd /path/to/project
npm install
npm run watch
```

Then, visit http://localhost/path/to/project/example

### Properties

#### props.data

The only required propery, JSON object or array to inspect.

#### props.className

The class name to be added to the root component element.

#### props.search

Search bar component that accepts `onChange`, `data` and `query` properties.
Defaults to built-in search bar. Pass `false` to disable search.

#### props.searchOptions

Optional parameters for search (toolbar). Must be an object.

- `debounceTime`, wait time (ms) between search field `onChange` events before actually performing search. This can help provide a better user experience when searching larger data sets. Defaults to `0`.

#### props.query

Optional initial search query, defaults to an empty string.

#### props.interactiveLabel

Pass component factory that would receive the following properties:

- `value`, either stringified property value or key value that is being interacted with,
- `originalValue`, either the original property value or key value,
- `isKey`, boolean flag to differentiate between interacting with keys or properties,
- `keypath`, keypath of the node being interacted with, will be the same for keys and properties

Can be used to create custom input fields for JSON property names and primitive
values, see [#3](https://github.com/Lapple/react-json-inspector/issues/3)
for more information.

#### props.onClick

Callback to be run whenever any key-value pair is clicked. Receives an object
with `key`, `value` and `path` properties.

#### props.validateQuery

Function to check whether the entered search term is sufficient to query data.
Defaults to `(query) => query.length >= 2`.

#### props.isExpanded

Optional predicate that can determine whether the leaf node should be expanded
on initial render. Receives two arguments: `keypath` and `value`. Defaults to
`(keypath, query) => false`.

#### props.filterOptions

Optional parameters for filterer (search). Must be an object.

- `cacheResults`, Set to `false` to disable the filterer cache. This can sometimes provide performance enhancements with larger data sets. Defaults to `true`.
- `ignoreCase`, Set to `true` to enable case insensitivity in search. Defaults to `false`.

#### props.verboseShowOriginal

Set to `true` for full `showOriginal` expansion of children containing search term. Defaults to `false`.

---
_Source: https://npm.io/package/react-json-inspector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._