Popularity
0.8
Growing
Activity
8.0
Declining
11
3
0

Monthly Downloads: 0
Programming language: JavaScript
Tags: UI Components     Miscellaneous    
Latest version: v1.2.17

react-demo-tab alternatives and similar libraries

Based on the "Miscellaneous" category

Do you think we are missing an alternative of react-demo-tab or a related project?

Add another 'Miscellaneous' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
View more from us

README

React DemoTab 📑

npm version Build Status

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

Contributing

All contributions are welcome!