# flipper-plugin-react-native-inspect-json

> This plugin shows a tree view of a serializable object in your React Native app. It is specifically intended for objects that are too large to continuously sync with Flipper desktop. Instead, this plugin will only sync the parts of the object which have b

Latest version **0.1.2** (published 2021-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install flipper-plugin-react-native-inspect-json
pnpm add flipper-plugin-react-native-inspect-json
yarn add flipper-plugin-react-native-inspect-json
bun add flipper-plugin-react-native-inspect-json
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2021-02-17 |
| First published | 2021-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 246 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | flut1 |
| Keywords | flipper-plugin, react-native, inspect, data, json, tree, mobx, store |

## Links

- npm: https://www.npmjs.com/package/flipper-plugin-react-native-inspect-json
- Repository: https://github.com/flut1/flipper-plugin-react-native-inspect-json
- Issues: https://github.com/flut1/flipper-plugin-react-native-inspect-json/issues
- npm.io page: https://npm.io/package/flipper-plugin-react-native-inspect-json

## Dependencies (2)

- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.3.0
- [flipper-plugin-react-native-inspect-json-client](https://npm.io/package/flipper-plugin-react-native-inspect-json-client.md) ^0.1.2

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.1.2 (latest) — 2021-02-17
- 0.1.0 — 2021-01-05
- 0.0.7 — 2021-01-05
- 0.0.6 — 2021-01-05
- 0.0.5 — 2021-01-05
- 0.0.4 — 2021-01-05
- 0.0.3 — 2021-01-05
- 0.0.2 — 2021-01-05
- 0.0.1 — 2021-01-05

## README

# flipper-plugin-react-native-inspect-json

This plugin shows a tree view of a serializable object in your React Native app. It is specifically intended for objects 
that are too large to continuously sync with Flipper desktop. Instead, this plugin will only sync the parts of the 
object which have been expanded in the tree view in Flipper. 

The plugin has been created for usage with a global MobX store, of which you can find an example below. However, it should
also work with other kinds of objects. Keep in mind that this plugin does not track changes to the object. If you don't
use MobX, you would have to implement your own change tracking that calls `updateState()`.

## Compatibility 
This plugin has been tested with Flipper and `react-native-flipper` 0.75.0

## Installation
In Flipper:

* Open Flipper
* Goto "manage plugins"
* Search for "react-native-inspect-json"
* Hit "install" on the plugin
* Restart

In your react-native app:

```typescript
yarn add flipper-plugin-react-native-inspect-json-client react-native-flipper
```

## Example -- TypeScript and MobX

```typescript
import bootstrap, { Subscriptions } from 'flipper-plugin-react-native-inspect-json-client';
import {comparer, reaction} from 'mobx';
import {IReactionDisposer} from 'mobx/lib/internal';

function storeFlipperPlugin(store: Store) {
    if (__DEV__) {
        const plugin = bootstrap();

        /* we create a MobX reaction for each expanded object in Flipper */
        const reactions: Record<string, IReactionDisposer> = {};

        /* this method is called whenever subscriptions update */
        plugin.onSubscriptionsUpdate = (subscriptions: Subscriptions) => {
            Object.keys(reactions)
                .filter(key => !subscriptions.includes(key))
                .forEach(key => {
                    /* disposes a reaction */
                    reactions[key]();
                    delete reactions[key];
                });

            for (const subscription of subscriptions) {
                reactions[subscription] = reaction(
                    /* generate a shallow description of the object at the given path */
                    () => {
                        const object = plugin.getAtPath(store, subscription);
                        return plugin.generateStateSegment(object);
                    },
                    /* when that description changes, send it to Flipper */
                    (segment) => {
                        if (segment) {
						    plugin.updateSegment(subscription, segment || null);
                        }
                    },
                    {
                        /* use deep equality to check if the description has changed */
                        equals: comparer.structural,
                        /* send it once immediately */
                        fireImmediately: true,
						delay: 100,
                    }
                );
            }
        };

        plugin.onDisconnect = () => {
            /* dispose all reactions */
            Object.keys(reactions)
                .forEach(key => {
                    reactions[key]();
                    delete reactions[key];
                });
        };
    }
}
```

## API

Todo

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