muddylemon / demoboard

Demonstrating your UI components with ease, a Storybook alternative.

Demoboard

Table of Contents

• Install
• Basic Usage
• Guide
  • React Components
  • Vue Components
  • Customize Homepage
  • Customize Site Title
• 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.section('Buttons').add('Primary Button', {
  component: toReact(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 can be an HTML string or a React component.

Customize Site Title

import { create, mount } from 'demoboard'

const demoboard = create()

mount(demoboard, '#app', {
  title: 'My Demo'
})

Then title defaults to Demoboard.

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