misund / react-component-demo

A React Component To make live editable demos of other React Components

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Component Demo

A React Component To make live editable demos of other React Components. Great for documentation.

Demo

Install

npm install react-component-demo --save

Use

props

  • Component - the Component to demo.
  • name - the name of the Component, will use Component.displayName if not provided.
  • props - an object with the props for the component (these will be editable)
  • codeContainerStyle - optional prop to edit style of code container
  • componentContainerStyle - optional prop to edit style of component container
  • Any other props will be transferred to the root element
import React from 'react';
import { render } from 'react-dom';
import ComponentDemo from 'react-component-demo';

function TestComponent({ backgroundColor, color, height }) {
  return (
    <div style={{backgroundColor, color, height, fontWeight: 800, fontSize: "80px" }}>
      React Component Demo
    </div>
  );
}

function Demo() {
  return (
    <ComponentDemo
      Component={TestComponent}
      name='TestComponent'
      props={{
        backgroundColor: 'dodgerblue',
        color: 'bisque',
        height: '500px'
      }}
      codeContainerStyle={{ width: '48%', float: 'left'}}
      componentContainerStyle={{ width: '48%', float: 'right'}}
    />
  );
}

render(<Demo />, document.getElementById('app'));
ezoic increase your site revenue

About

A React Component To make live editable demos of other React Components


Languages

Language:JavaScript 93.5%Language:HTML 6.5%