Note

Hey there 👋 This project has been archived. It was a fun side-project to work on to learn about esbuild, React, Web Sockets, and more. Thank you for you're support.

Snappy and delightful React component workshop

Overview

Exhibitor is a React component workshop - a tool for creating React component libraries. It allows you to see your front-end components (or pages) in a hot-reloading website whilst you create them, with the ability to tweak their props and test them in a variety of domains such as accessibility, responsiveness, and automated end-to-end testing.

See the live demo!

Usage Overview

Exhibitor is simple to setup. It can be added to an existing React codebase that contains components or be used to bootstrap one from scratch. See the Exhibitor Wiki for more information.

If you already have React components, using Exhibitor is as easy as this:

npm install --save-dev exhibitor react react-dom

Create exhibitions of your components:

// src/button.exh.ts (or .js, .jsx, .tsx, ...)
import exhibit, { simpleTextInputModifier } from 'exhibitor'
import Button from './button' // I.e. button.tsx

exhibit(Button, 'Button')
  // Define any default props
  .defaults({
    color: 'default',
  })
  // Define which props are events of the component
  .events({ onClick: true })
  // Define miscellaneous options
  .options({ group: 'Final Review' })
  // Define how props can be tweaked
  .propModifiers([
    simpleTextInputModifier('textContent'),
  ])
  // Define variants with different prop values
  .variant('Green', defaultProps => ({
    ...defaultProps,
    color: 'green',
  }))
  // Group variants together
  .group('Large', ex => ex
    .defaults(p => {
      ...p,
      size: 'large'
    })
    .variant('Green', p => {
      ...p,
      color: 'green'
    }))
  .build()

Start exhibitor:

npx exhibitor start

Major Features

• Extremely fast and lightweight
• Simple and no magic
• Sane defaults
• Expressive Javascript API
• esbuild
• Accessibility testing
• Responsiveness testing
• Playwright end-to-end testing
• Uses your choice of React version to use for your components

Development

Want to join in and contibute to Exhibitor? Awesome! See ./contributing/development.md.

---

If you would like to support the development of Exhibitor, feel free to sponsor me on GitHub or buy me a coffee ✨