Getting Started

Prerequisites

• Exhibitor is powered by Node.js. Ensure you have Node.js installed on your system.
• Ensure that you have a directory that represents an NPM package. If unsure:
  • Create or cd to the directory you would like to have your component library within. For example: cd my-component-library
  • Initialize the directory as an NPM package (to be able to install NPM dependencies): npm init -y

Manually

• Install NPM dependencies: npm i -S exhibitor react react-dom

• Create a React component:

  // greeting.tsx
  import React from 'react'
  
  export const Greeting = (props: { name: string }) => (
    <div>Hello <b>${props.name}</b>!</div>
  )

• Create an exhibit for your component:

  // greeting.exh.tsx
  import exhibit, { simpleTextInputModifier } from 'exhibitor'
  import Greeting from './greeting.tsx
  
  exhibit(Greeting, 'Greeting')
    .defaults({
      name: 'Hacker'
    })
    .propModifiers([
      simpleTextInputModifier('name'),
    ])
    .build()

• Start Exhibitor: npx exhibitor start

• Navigate to http://localhost:4001

init CLI command

The CLI init command will automatically perform the steps required to get a simple component library up and running with Exhibitor ready to use.

In the parent directory that you want to create the component library in:

For MacOS and Linux (and WSL):

mkdir my-component-library &&\
  cd my-component-library &&\
  npm init -y &&\
  npm i -S exhibitor &&\
  npx exhibitor init

For Windows:

mkdir my-component-library && cd my-component-library && npm init -y && npm i -S exhibitor && npx exhibitor init

Next Steps

For information on how to provide configuration for Exhibitor (e.g. for the start Exhibitor CLI command), see the How to Provide Configuration page.

For more information on the Javascript API (e.g. for the exhibit(...) function), see the Javascript API Reference page