# react-demo-page

> Build a demo page for your react component with ease

Latest version **0.3.6** (published 2020-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-demo-page
pnpm add react-demo-page
yarn add react-demo-page
bun add react-demo-page
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.6 |
| Published | 2020-04-23 |
| First published | 2017-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Cédric Delpoux |
| Maintainers | cedricdelpoux |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/react-demo-page
- Repository: https://github.com/xuopled/react-demo-page
- Homepage: https://github.com/xuopled/react-demo-page#readme
- Issues: https://github.com/xuopled/react-demo-page/issues
- npm.io page: https://npm.io/package/react-demo-page

## Dependencies (4)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.1.2
- [styled-components](https://npm.io/package/styled-components.md) ^5.1.0
- [react-interactive-component](https://npm.io/package/react-interactive-component.md) ^0.1.4

## Recent versions

- 0.3.6 (latest) — 2020-04-23
- 0.3.5 — 2018-01-08
- 0.3.4 — 2017-11-23
- 0.3.3 — 2017-11-23
- 0.3.2 — 2017-11-08
- 0.3.1 — 2017-11-08
- 0.3.0 — 2017-11-08
- 0.2.2 — 2017-08-23
- 0.2.1 — 2017-08-23
- 0.1.1 — 2017-08-23
- 0.1.0 — 2017-08-23

## README

# react-demo-page

[![npm package][npm-badge]][npm]
[![Travis][build-badge]][build]
[![Codecov][codecov-badge]][codecov]
![Module formats][module-formats]

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

## Getting started

[![react-demo-page](https://nodei.co/npm/react-demo-page.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-demo-page/)

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

```shell
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

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

## Usage

```javascript
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](https://github.com/insin/nwb) and [gh-pages](https://github.com/tschaub/gh-pages):

```shell
yarn add nwb gh-pages --dev
```

and add these scripts to your `package.json`:
```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][github-page]

## Contributing

* ⇄ Pull/Merge requests and ★ Stars are always welcome.
* For bugs and feature requests, please [create an issue][github-issue].
* Pull requests must be accompanied by passing automated tests (`npm test`).

See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines

## Changelog

See [changelog](./CHANGELOG.md)

## License

This project is licensed under the MIT License - see the [LICENCE.md](./LICENCE.md) file for details

[npm-badge]: https://img.shields.io/npm/v/react-demo-page.svg?style=flat-square
[npm]: https://www.npmjs.org/package/react-demo-page

[build-badge]: https://img.shields.io/travis/xuopled/react-demo-page/master.svg?style=flat-square
[build]: https://travis-ci.org/xuopled/react-demo-page

[codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-demo-page.svg?style=flat-square
[codecov]: https://codecov.io/gh/xuopled/react-demo-page

[module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square

[github-page]: https://xuopled.github.io/react-demo-page
[github-issue]: https://github.com/xuopled/react-demo-page/issues/new

---
_Source: https://npm.io/package/react-demo-page · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._