Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-demo-library with all npm packages installed. Try it out:

var reactDemoLibrary = require("react-demo-library")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-demo-library v2.0.0

A React component that helps you to build a library of react-demo demos

react-demo-library

A React component that helps you to build a library of react-demo demos

Installation

$ npm install react-demo-library

Usage

The following will give you a nice library of your components with a navigation menu on left side. Each components will have it's own page with a #hash URL. For fullWidth demos menu will be hidden.

import React from 'react'
import ReactDOM from 'react-dom'
import Demo from 'react-demo'
import Library from 'react-demo-library'

ReactDOM.render(
  <Library
    demos={[
      {
        // Location in the menu hierarchy, this also affects URL (e.g. #!Foo/Bar/Baz/)
        location: ['Foo', 'Bar', 'Baz'],

        // The demo React-element
        demo: <Demo ... />,

        // Description (will be shown on the demo page)
        description: "...",

        // Import path (will be shown on the demo page)
        importPath: "foo/bar/Baz",

        // Whether component needs full width of browser window
        // to be available for it. You should also specify it in Demo: <Demo fullWidth ... />
        fullWidth: true,

        // Files (will be shown on the demo page)
        files: [{name, content}],
      },
      {
        ...
      },
      ...
    ]}
  />,
  document.getElementById('app')
)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free