https://github.com/jxnblk/json-react

https://github.com/jxnblk/json-react

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/jxnblk/json-react
• Owner: jxnblk
• Archived: true
• Created: 2018-02-20T00:44:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-02-20T00:44:55.000Z (over 6 years ago)
• Last Synced: 2024-06-14T22:51:54.369Z (3 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 30
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# json-react

Convert objects to React elements and elements to serializable objects

```sh

npm i json-react

```

Convert React element to object

```js

import jsonReact from 'json-react'

const el = (

  


    
Hello

  

)


const obj = jsonReact.toObject(el)

```

```js

// returns

{

  type: 'div',

  props: null,

  children: [

    {

      type: 'h1',

      props: null,

      children: [

        'Hello'

      ]

    }

  ]

}

```

Convert object to React element

```js

import jsonReact from 'json-react'

const el = jsonReact.toElement({

  type: 'div',

  props: null,

  children: [

    {

      type: 'h1',

      props: null,

      children: [

        'Hello'

      ]

    }

  ]

})

```

```js

// returns



  
Hello



```


Convert object to React element with references to components

```js

import jsonReact from 'json-react'

import MyComponent from './MyComponent'

const el = jsonReact.toElement({

  type: 'MyComponent',

  props: {},

  children: [

    'Hello'

  ]

}, { MyComponent })

// Hello

```

## Why?

- Demonstrate how React elements are objects and can be converted to and from JSON

- Components can be serialized by displayName

- Components can be passed as scope to create elements from objects