react-json-renderer
v0.6.0
Published
Render React components to a JSON tree
Downloads
60
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
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:
yarn add react # Yarn
npm install react # npm
APIs
convertToObject
convertToObject(
tree: React.Element<any>,
params?: {
processMeta?: (tree: React.Element<any>) => ({
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
convertToJSON(
tree: React.Element<*>,
params?: {
processMeta?: (tree: React.Element<any>) => ({
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
renderFromObject(
tree: Object,
params?: {
components?: {
[type: string]: React.ComponentType<any>,
},
fallback?: React.ComponentType<any>,
},
): 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
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 }) =>
<View>
<Text>Welcome {name}!</Text>
</View>
// Returns the JSON payload to provide to the client
export const createWelcome = (name) => convertToJSON(<Welcome name={name} />)
Web client
import React from 'react'
import { Renderer } from 'react-json-renderer'
// Components from the payload supported by the client
const components = {
Text: ({ children }) => <span className='text'>{children}</span>,
View: ({ children }) => <div className='view'>{children}</div>,
}
// Fallback for unsupported components, if not provided it will return null and therefore not render the component and its children
const Fallback = ({ children }) => <div className='fallback'>{children}</div>
// Inject the JSON payload from the server and render with provided component and fallback
export const PayloadRenderer = ({ payload }) =>
<Renderer components={components} fallback={Fallback} json={payload} />
React-Native client
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 }) => <Text style={styles.text}>{children}</Text>
const RenderView = ({ children }) => <View style={styles.view}>{children}</View>
const components = {
Text: RenderText,
View: RenderView,
}
export const PayloadRenderer = ({ payload }) =>
<Renderer components={components} fallback={RenderView} json={payload} />
License
MIT
See LICENSE file.