react-demo-tab

📑 React component to easily create demos of other components

Programming language: TypeScript

License: MIT License

Tags: UI Components     Miscellaneous    

Latest version: v1.2.18

README

React DemoTab 📑

A React component to easily create demos of other components

Install

npm install react-demo-tab

Demo

DemoTab example

Example

[](demo-tab.gif)

import React from 'react';
import ReactDOM from 'react-dom';
import DemoTab from 'react-demo-tab';
import DemoComponent from './ButtonGreen';

const demoCode = `
import React from 'react';
import './ButtonGreen.css';

const ButtonGreen = () => <button className="btn-green">Green Button</button>;
export default ButtonGreen;`;

const demoStyle = `
.btn-green {
  background-color: green;
  font-size: 14px;
  padding: 12px 26px;
  border-radius: 6px;
}`;

const App = () => {
  return (
    <DemoTab code={demoCode} style={demoStyle}>
      <DemoComponent />
    </DemoTab>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

Create demo of component that is passed as a child.

Below is the complete list of possible props and their options:

▶︎ indicates optional prop with default value

code: string
Demo code. Required.

style: string ▶︎ undefined
Demo style.

codeExt: 'jsx' | 'tsx' ▶︎ jsx
Code file extension for image to be displayed.

styleExt: 'css' | 'scss' ▶︎ css
Style file extension for image to be displayed.

Create demos with CLI tool

Instead of manually creating demos, automate the process with DemoTab CLI tool.

Development

Easily set up a local development environment!

Build all the examples and starts storybook server on localhost:9009:

• clone
• npm install
• npm start

OR

Clone this repo on your machine, navigate to its location in the terminal and run:

npm install
npm link # link your local repo to your global packages
npm run build:watch # build the files and watch for changes

Clone project repo that you wish to test with react-demo-tab library and run:

npm install
npm link react-demo-tab # link your local copy into this project's node_modules
npm start

Start coding! 🎉

Built with DemoTab

• React Tilt - Repo - DemoTab
• Mighty Mouse - Repo - DemoTab
• Magnetic Board - Repo - DemoTab

Contributing

All contributions are welcome!