📑 A React component to easily create demos of other components

Overview

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

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!

You might also like...
Twinkle Tray lets you easily manage the brightness levels of multiple monitors
Twinkle Tray lets you easily manage the brightness levels of multiple monitors

Twinkle Tray lets you easily manage the brightness levels of multiple monitors. Even though Windows 10 is capable of adjusting the backlight on most monitors, it typically doesn't support external monitors. Windows 10 also lacks any ability to manage the brightness of multiple monitors.

The history library lets you easily manage session history anywhere JavaScript runs.

history · The history library lets you easily manage session history anywhere JavaScript runs. A history object abstracts away the differences in vari

This command line can be used to convert React class components to become functional components

class-to-function This command line can be used to convert React class components to become functional components. Installation Install it as a global

We have updated our application over to using hooks and functional components to replace any class components we had before.
We have updated our application over to using hooks and functional components to replace any class components we had before.

Crwn hooks We have updated our application over to using hooks and functional components to replace any class components we had before. How to fork an

A drum machine built with React using the Create React App toolchain.

drum-machine A simple drum machine built with React using the Create React App toolchain. Getting Started Clone or download the repository. Open a com

React-Login-app - Create a Login and Registration Page with React Router
React-Login-app - Create a Login and Registration Page with React Router

About In this repo I was given a Task to create a Login and Registration page wh

Aviasales React-Redux-MobX- - A quick start Redux + TypeScript Create React App template

A quick start Redux + TypeScript Create React App template An opinionated quick

JSONX - Create React Elements, JSX and HTML from JSON

JSONX Description JSONX is a module that creates React Elements, JSX and HTML from JSON. Declarative The JSONX UMD comes with batteries included so yo

The goal of this exercise is to create a demo calendar application using React

The goal of this exercise is to create a demo calendar application using React. We strongly recommend create-react-app to make the bootstrapping of your application really easy.

Comments
  • Bump shelljs from 0.8.4 to 0.8.5

    Bump shelljs from 0.8.4 to 0.8.5

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
Releases(v1.3.8)
Owner
mkosir
TypeScript / Node / React / AWS
mkosir
Easily download Figma and create SVGs components for Vue, React, Angular and more to come

Easily download Figma and create SVGs components for Vue, React, Angular.

@figus 21 Sep 6, 2022
React project with Google Firebase API, create partys with admin view and user view. Users can ask topics to admin, and support other topics.

?? Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: React Firebase TypeScript ?? Como executar Clone o projeto e acesse a pasta

Felipe Souza 3 Aug 27, 2021
whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

JstnLT 21 Dec 30, 2022
Special Edge for React Flow that never intersects with other nodes

React Flow Smart Edge Special Edge for React Flow that never intersects with other nodes. Install npm install @tisoap/react-flow-smart-edge Usage impo

Tiso Alvarez Puccinelli 114 Jan 3, 2023
A game with two independent units – the players – communicating with each other using an API

gameofthree Demo Click Here to access the demo. Description The goal of this project is to implement a game with two independent units – the players –

Musah Kusi Hussein 1 Oct 28, 2021
Kai Tinkess 2 Jan 23, 2022
Booking.com is a Dutch online travel agency for lodging reservations & other travel products, and a subsidiary of Booking Holdings

Booking.com is a Dutch online travel agency for lodging reservations & other travel products, and a subsidiary of Booking Holdings

Satya Prakash Mall 5 Sep 15, 2022
Display PDFs in your React app as easily as if they were images.

React-PDF Display PDFs in your React app as easily as if they were images. Lost? This package is used to display existing PDFs. If you wish to create

Wojciech Maj 6.6k Dec 31, 2022
Mozaïk is a tool based on nodejs / react / redux / nivo / d3 to easily craft beautiful dashboards

Mozaïk is a tool based on nodejs / react / redux / d3 to easily craft beautiful dashboards. See demo Features: Scalable layout Themes support Extendab

Raphaël Benitte 3.6k Dec 30, 2022
Use Pub/Sub pattern inside your React applications easily

spacefold ?? Use Pub/Sub pattern inside your React applications easily! ?? Table of content Demo Why Usage Contribute ?? Demo Like always, a counter a

Pedro Nauck 56 Nov 15, 2022