egoist / Demoboard
Licence: mit
Demonstrating your UI components with ease, a Storybook alternative.
Stars: ✭ 77
Programming Languages
javascript
184084 projects - #8 most used programming language
Demoboard
Table of Contents
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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].