react-demo-page

ReactDemoPage let you build a demo page for your react component with ease

Getting started

You can download react-demo-page from the NPM registry via the npm or yarn commands

yarn add react-demo-page
npm install react-demo-page --save

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

https://unpkg.com/react-demo-page/dist/react-demo-page.min.js.

Usage

import React from "react"
import ReactDemoPage from "react-demo-page"
import YourReactComponent from "./src/YourReactComponent"
import pkg from "../package.json"

const routes = [
  // A page with only html
  {
    path: "/",
    exact: true,
    html: html,
    label: "Home",
  },
  // A page with demo component and html as presentation
  {
    path: "/demo",
    demo: {
      component: <YourReactComponent />,
      html: html,
    },
    label: "Demo",
  },
  // A custom page
  {
    path: "/myCustomPage",
    component: (
      <div>
        <h2>{"Title"}</h2>
        <YourReactComponent />
      </div>
    ),
    label: "Custom page",
  },
]

const header = {
  title: pkg.name,
  buttons: [
    {label: "Github", url: pkg.homepage},
    {label: "Npm", url: `https://www.npmjs.com/package/${pkg.name}`},
    {label: "Download", url: `${pkg.homepage}/archive/master.zip`},
  ],
}

const footer = {
  author: pkg.author,
}

const Demo = () =>
  <ReactDemoPage
    basename={pkg.name} // You need this if you deploy on Github page
    header={header}
    footer={footer}
    pages={routes}
    color="#3498db"
  />

If you need to watch and build your demo page to deploy it but you don`t want a lot of configuration, I recommend you to use nwb and gh-pages:

yarn add nwb gh-pages --dev

and add these scripts to your package.json:

{
  "scripts": {
    "demo:start": "nwb react run {DEMO_PATH}",
    "demo:build": "nwb react build {DEMO_PATH}",
    "demo:deploy": "gh-pages -d {DEMO_DIST_PATH}"
  }
}

Demo

See Demo page

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