https://github.com/mainframeos/react-json-renderer
https://github.com/mainframeos/react-json-renderer
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/mainframeos/react-json-renderer
- Owner: MainframeOS
- License: mit
- Created: 2017-05-12T19:35:54.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-04-03T10:13:28.000Z (about 8 years ago)
- Last Synced: 2025-02-19T21:08:19.488Z (over 1 year ago)
- Language: JavaScript
- Size: 163 KB
- Stars: 37
- Watchers: 10
- Forks: 3
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-json-renderer
Basic converter of a React component tree to a JS object or JSON string and associated renderer using provided components.
## Installation
```sh
yarn add react-json-renderer # Yarn
npm install react-json-renderer # npm
```
React is a required peer dependency, make sure to install it as well if you haven't already:
```sh
yarn add react # Yarn
npm install react # npm
```
## APIs
### convertToObject
```js
convertToObject(
tree: React.Element,
params?: {
processMeta?: (tree: React.Element) => ({
name: string,
type: 'function' | 'string' | 'unknown',
}),
processProps?: (props: Object) => Object,
},
): Object
```
Converts a component tree to a formatted Object supported by the `renderFromObject()` function.
### convertToJSON
```js
convertToJSON(
tree: React.Element<*>,
params?: {
processMeta?: (tree: React.Element) => ({
name: string,
type: 'function' | 'string' | 'unknown',
}),
processProps?: (props: Object) => Object,
space?: number | string,
},
): Object
```
Converts a component tree to a JSON string supported by the `Renderer` component.
### renderFromObject
```js
renderFromObject(
tree: Object,
params?: {
components?: {
[type: string]: React.ComponentType,
},
fallback?: React.ComponentType,
},
): React.Element<*>
```
Converts a formatted Object to a React elements tree ready to be rendered by React.
## Components
### Renderer
**Props:**
- `json?: string`: Formatted Object tree in JSON.
- `tree?: Object`: Formatted Object tree.
## Example
**Server or other source**
```js
import React from 'react'
import { convertToJSON } from 'react-json-renderer'
// Simple strings will be exported as component types and functions will be executed
const Text = 'Text'
const View = 'View'
const Welcome = ({ name }) =>
Welcome {name}!
// Returns the JSON payload to provide to the client
export const createWelcome = (name) => convertToJSON()
```
**Web client**
```js
import React from 'react'
import { Renderer } from 'react-json-renderer'
// Components from the payload supported by the client
const components = {
Text: ({ children }) => {children},
View: ({ children }) =>
{children},
}
// Fallback for unsupported components, if not provided it will return null and therefore not render the component and its children
const Fallback = ({ children }) =>
{children}
// Inject the JSON payload from the server and render with provided component and fallback
export const PayloadRenderer = ({ payload }) =>
```
**React-Native client**
```js
import React from 'react'
import { Renderer } from 'react-json-renderer'
import { StyleSheet, Text, View } from 'react-native'
const styles = StyleSheet.create({
text: {
fontSize: 14,
},
view: {
flex: 1,
},
})
const RenderText = ({ children }) => {children}
const RenderView = ({ children }) => {children}
const components = {
Text: RenderText,
View: RenderView,
}
export const PayloadRenderer = ({ payload }) =>
```
## License
MIT
See [LICENSE](LICENSE) file.