Documenting a component

A component needs to have a basic description, prop table, and playground to showcase behavior. It's also a good idea to provide usage scenarios and include multiple playgrounds with different props.

How to use <Props />

The <Props /> component let's us get a table of props supported by a particular component. To get a prop table for our own <Button /> component we have to do the following:

import Button from 'src/Button';
<Props of={Button} />;

And it will yield this:

How to use <Playground />

The playground component will render an interactive playground. Therefore all components rendered inside it will be both rendered and be editable.

It's important to note that any components used inside a playground have to be imported(outside of the playground) first.

Let's do a playground for our own Drawer component.

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer
        isVisible={on}
        onClose={toggle}
        footer={
          <div className="d-flex justify-content-end p-3">
            <Button className="mr-2">Action 1</Button>
            <Button theme="secondary">Action 2</Button>
          </div>
        }
      >
        Boom
      </Drawer>
    </div>
  )}
</Toggle>

The above playground is the result of this:

import Drawer from 'src/drawer';
import { Toggle } from 'react-powerplug';
<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Button onClick={toggle}>Open Drawer</Button>
      <Drawer isVisible={on} onClose={toggle} />
    </div>
  )}
</Toggle>;

Learn More

Docz is an awesome documenting tool You can create custom React components and use them with Markdown! For further questions refer to official Docz documentation.