Demoboard

Table of Contents

• Install
• Basic Usage
• Guide
  • React Components
  • Vue Components
  • Customize Homepage
  • Customize Site Title
  • Display Source Code
  • Display README for Each Demo
• Contributing
• Author

Install

yarn add demoboard

Basic Usage

import React from 'react'
import { create, mount } from 'demoboard'
 
// A component that you want to demonstrate
import Button from './Button'
 
// Create a demoboard instance
const demoboard = create()
 
// Add a section to demonstrate the `Button` component
demoboard
  .section('Buttons')
  .add('Primary Button', {
    // `component` should be a React component
    component: () => <Button>Primary Button</Button>
  })
  .add('Success Button', {
    component: () => <Button variant="success">Success Button</Button>
  })
 
// Mount the demoboard to given selector
mount(demoboard, '#app')

Guide

React Components

It just works™.

Vue Components

Just convert your Vue component into React component with @egoist/vue-to-react:

import toReact from '@egoist/vue-to-react'
import Button from './Button.vue'
 
demoboard.addDecorator(item => {
  const Component = item.options.component
  item.options.component = toReact(Component)
})
 
demoboard.section('Buttons').add('Primary Button', {
  component: Button
})

Customize Homepage

import { create, mount } from 'demoboard'
 
const demoboard = create()
 
const readme = `<h1>Hello</h1>`
// Or
// const readme = () => <h1>Hello</h1>
 
mount(demoboard, '#app', {
  readme
})

readme should be a Markdown string.

Customize Site Title

import { create, mount } from 'demoboard'
 
const demoboard = create()
 
mount(demoboard, '#app', {
  title: 'My Demo'
})

Then title defaults to Demoboard.

Display Source Code

demoboard.section('Buttons')
  .add('Primary Button', {
    component: () => <button>Primary Button</button>,
    code: `<button>Primary Button</button>,`
    // Optional, default to `js`
    codeLang: 'js'
  })

Display README for Each Demo

demoboard.section('Buttons').add('Danger Button', {
  component: () => <Button type="Danger">Danger Button</Button>,
  readme: `Used to trigger a dangerous operation.`
})

readme should be a Markdown string.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

demoboard © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily