Use React hooks inside an MDX story in Storybook

Originally posted on dev.to

A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.

MDX is a standard file format that combines Markdown with JSX. It means you can use Markdown’s terse syntax (such as # heading) for your documentation, write stories that compile to our component story format, and freely embed JSX component blocks at any point in the file. All at once.

A React Hook lets you use state and other React features without writing a class.

Tie the three together:

<Story name="With hooks">
  {() => {
    const [count, setCount] = useState(0);
    return (
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} time(s)
      </button>
    );
  }}
</Story>