Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dean177/react-native-json-tree
React Native JSON Viewer Component, based on react-json-tree
https://github.com/dean177/react-native-json-tree
iterables json json-viewer react react-native theme
Last synced: 4 days ago
JSON representation
React Native JSON Viewer Component, based on react-json-tree
- Host: GitHub
- URL: https://github.com/dean177/react-native-json-tree
- Owner: Dean177
- License: mit
- Created: 2016-08-13T14:05:37.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2025-02-04T23:23:27.000Z (15 days ago)
- Last Synced: 2025-02-09T08:12:11.187Z (11 days ago)
- Topics: iterables, json, json-viewer, react, react-native, theme
- Language: JavaScript
- Size: 334 KB
- Stars: 119
- Watchers: 5
- Forks: 32
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# react-native-json-tree
React Native JSON Viewer Component, based on [react-json-tree](https://github.com/alexkuz/react-json-tree). Supports [iterable](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable) objects, such as [Immutable.js](https://facebook.github.io/immutable-js/).

### Usage
```jsx
import JSONTree from 'react-native-json-tree'
// If you're using Immutable.js: `npm i --save immutable`
import { Map } from 'immutable'// Inside a React component:
const json = {
array: [1, 2, 3],
bool: true,
object: {
foo: 'bar'
}
immutable: Map({ key: 'value' })
}```
#### Result:

Check out the [Example](Example) directory.
### Theming
This component now uses [react-base16-styling](https://github.com/alexkuz/react-base16-styling) module, which allows to customize component via `theme` property, which can be the following:
- [base16](http://chriskempson.github.io/base16) theme data. [The example theme data can be found here](https://github.com/gaearon/redux-devtools/tree/75322b15ee7ba03fddf10ac3399881e302848874/src/react/themes).
- object that contains style objects, strings (that treated as classnames) or functions. A function is used to extend its first argument `{ style, className }` and should return an object with the same structure. Other arguments depend on particular context (and should be described here). See [createStylingFromTheme.js](https://github.com/alexkuz/react-json-tree/blob/feature-refactor-styling/src/createStylingFromTheme.js) for the list of styling object keys. Also, this object can extend `base16` theme via `extend` property.Every theme has a light version, which is enabled with `invertTheme` prop.
```jsx
const theme = {
scheme: 'monokai',
author: 'wimer hazenberg (http://www.monokai.nl)',
base00: '#272822',
base01: '#383830',
base02: '#49483e',
base03: '#75715e',
base04: '#a59f85',
base05: '#f8f8f2',
base06: '#f5f4f1',
base07: '#f9f8f5',
base08: '#f92672',
base09: '#fd971f',
base0A: '#f4bf75',
base0B: '#a6e22e',
base0C: '#a1efe4',
base0D: '#66d9ef',
base0E: '#ae81ff',
base0F: '#cc6633'
};```
#### Result (Monokai theme, dark background):

#### Advanced Customization
```jsx
({
style: {
...style,
textTransform: expanded ? 'uppercase' : style.textTransform
}
})
}} />
```#### Customize Labels for Arrays, Objects, and Iterables
You can pass `getItemString` to customize the way arrays, objects, and iterable nodes are displayed (optional).
By default, it'll be:
```jsx
{itemType} {itemString}}
/>
```But if you pass the following:
```jsx
const getItemString = (type, data, itemType, itemString) =>
{type};
```Then the preview of child elements now look like this:

#### Customize Rendering
You can pass the following properties to customize rendered labels and values:
```jsx
{raw}}
valueRenderer={raw => {raw}}
/>
```In this example the label and value will be rendered with bold and italic text respectively.
For `labelRenderer`, you can provide a full path - [see this PR](https://github.com/alexkuz/react-json-tree/pull/32).
#### More Options
- `shouldExpandNode: (keyName, data, level) => boolean` - determines if node should be expanded (root is expanded by default)
- `hideRoot: boolean` - if `true`, the root node is hidden.
- `sortObjectKeys: boolean | (a, b) => number` - sorts object keys with compare function (optional). Isn't applied to iterable maps like `Immutable.Map`.### Credits
- [alexkuz](https://github.com/alexkuz/) for [react-json-tree](https://github.com/alexkuz/react-json-tree)
### License
MIT