Example Storybook with ReasonML
  • JavaScript 67.7%
  • Reason 32.3%
Find a file
2021-06-17 10:26:30 +02:00
.circleci ci: Node v 12 2020-02-27 13:04:32 +01:00
.storybook feat: Add actions and try knobs 2020-02-27 12:00:01 +01:00
src fix: Remove genType 2020-02-27 12:48:47 +01:00
.gitignore ci: Deploy storybook-static 2020-02-27 12:59:34 +01:00
bsconfig.json fix: Remove genType 2020-02-27 12:48:47 +01:00
package.json fix: Remove genType 2020-02-27 12:48:47 +01:00
README.md docs: Add demo link 2020-02-27 12:23:34 +01:00
yarn.lock build(deps): Bump postcss from 7.0.27 to 7.0.36 2021-06-16 21:15:43 +00:00

ReasonReact with Storybook

This is an example on how to run Storybook with ReasonML. Thanks to bs-storybook.

Demo

Goal

  • Being able to write ReasonML Stories the same way as React
  • Provide a minimum reproducible demo
  • Showcase the configuration
  • Explore current limitations

Example

This is how to use Story API

open BsStorybook;

module ButtonWithEmoji = {
  [@react.component]
  let make = () =>
    <button onClick={Action.action("I clicked The Button!")}>
      <span role="img" ariaLabel="so cool">
        {React.string({js| 😀 😎 👍 💯 |js})}
      </span>
    </button>;
};

/* module is a reserved keyword in Reason and storybook needs
Node's module for hot-reloading, we get it with bs.raw */
let module_ = [%bs.raw "module"];

Story.storiesOf("Button", module_)
->(Story.add("with Text", () => <ButtonWithEmoji />));

Netlify Status