Skip to content

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

Notifications You must be signed in to change notification settings

conorhastings/react-component-demo

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Component Demo

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

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'));

About

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

Resources

Stars

Watchers

Forks

Packages

No packages published