react-layout-state-renderer

[![npm](https://img.shields.io/npm/v/react-layout-state-renderer.svg?style=flat-square)](https://www.npmjs.com/package/react-layout-state-renderer) [![CircleCI](https://circleci.com/gh/gregchamberlain/react-layout-state-renderer/tree/master.svg?style=svg)

Usage no npm install needed!

<script type="module">
  import reactLayoutStateRenderer from 'https://cdn.skypack.dev/react-layout-state-renderer';
</script>

README

ReactLayoutStateRenderer

npm CircleCI

Basic Example

import React from 'react';
import LayoutStateRenderer from 'react-layout-state-renderer';

const CustomComponent = () => <h1>Custom Component</h1>;
const layoutState = {
  root: {
    key: 'root',
    type: 'div',
    props: {},
    metadata: {},
    children: ['1'],
  },
  '1': {
    key: '1',
    type: 'CustomComponent',
    props: {},
    metadata: {},
    children: [],
    parent: 'root',
  },
};

const MyComponent = () => (
  <LayoutStateRenderer
    layoutState={layoutState}
    rootKey="root"
    components={{ CustomComponent }}
  />
);

export default MyComponent;