Snappy and delightful React component workshop
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.
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
- 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
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 ✨