Native Penguin Milk

    react-json-renderer

    0.6.0 • Public • Published

    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.

    Install

    npm i react-json-renderer

    DownloadsWeekly Downloads

    54

    Version

    0.6.0

    License

    MIT

    Unpacked Size

    207 kB

    Total Files

    21

    Last publish

    Collaborators

    • sarahwiley
    • mosic
    • aclarke
    • howleysv
    • diogoperillo
    • paul_lecam