react-interactive-component

ReactInteractiveComponent build custom controls from your component props and default props to let user interact easily with it.

It keep in sync edit and preview sections to reflect changes in real time.

Available files:

• CommonJS build => /lib,
• ES6 modules build => /es
• UMD build => /umd

Getting started

You can download react-interactive-component from the NPM registry via the npm or yarn commands

yarn add react-interactive-component
npm install react-interactive-component --save

If you don't use package manager and you want to include react-interactive-component directly in your html, you could get it from the UNPKG CDN

https://unpkg.com/react-interactive-component/dist/react-interactive-component.min.js.

Usage

import React, {Component} from "react"
import ReactInteractiveComponent, {loadEditorTheme} from "react-interactive-component"
import YourReactComponent from "./src/YourReactComponent"

loadEditorTheme()

const Demo = () => (
  <ReactInteractiveComponent>
    <YourReactComponent />
  </ReactInteractiveComponent>
)

Documentation

If you need some customization, checkout documentation

Demo

See Demo page

Todo list

• [x] Preview of your component
• [x] Interactive edit of your component
• [x] Demo of your component
• [x] Custom styling
• [x] Tabs layout
• [x] Handle boolean props
• [x] Handle text props
• [x] Handle number props
• [ ] Handle function props
• [ ] Handle object props
• [ ] Handle array props
• [ ] Custom Layout

Feel free to create an issue to discuss about the missing features

Contributing

• ⇄ Pull/Merge requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests (npm test).

See CONTRIBUTING.md guidelines

Changelog

See changelog

License

This project is licensed under the MIT License - see the LICENCE.md file for details