Storybook - Display code for render props components

23 May, 2019

Time to read: 1 mins

Problem

You have a render props component, and you want to display the source code for it in Storybook.

For example, let’s say that you have the following Toggle Component:

Toggle.jsx

import { useState } from "react";
import PropTypes from "prop-types";

const Toggle = ({ startVisible, children }) => {
  const [visible, setVisible] = useState(startVisible);
  const toggle = () => setVisible(!visible);
  return children({ visible, toggle });
};

Toggle.propTypes = {
  startVisible: PropTypes.bool,
};

Toggle.defaultProps = {
  startVisible: false,
};

export default Toggle;

You write a story for it:

stories/Toggle.stories.jsx

import React from "react";

import { storiesOf } from "@storybook/react";

import Toggle from "../src/components/Toggle";

storiesOf("Toggle", module).add("default", () => (
  <Toggle>
    {({ visible, toggle }) => (
      <>
        <button onClick={toggle}>{visible ? "Hide" : "Show"}</button>
        {visible && (
          <p>
            Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            Dicta quo expedita tempore, sunt quos quis incidunt ratione
            asperiores soluta impedit eveniet. Numquam, ipsum est maxime
            hic sit rem reprehenderit dicta!
          </p>
        )}
      </>
    )}
  </Toggle>
));

If you want to display the source code for that story, the most obvious solution is to use the Info addon. You can install it with:

yarn add -D @storybook/addon-info

and you can use it in your story:

stories/Toggle.stories.jsx

import React from "react";

import { storiesOf } from "@storybook/react";
import { withInfo } from "@storybook/addon-info"; 

import Toggle from "../src/components/Toggle";

storiesOf("Toggle", module)
  .addDecorator(withInfo) // Should be before any other decorators..
  .add("default", () => <Toggle>{/* skipping */}</Toggle>);

If you start the storybook server with yarn storybook, this is what it looks like:

Storybook addon source

As you can see, when you click the “show info” button, you can’t see the render props code.

Solution

To solve this, you can use another Storybook addon the storysource. You can install it with:

yarn add -D @storybook/addon-storysource

Import it in your .storybook/addons.js file:

.storybook/addons.js

// rest addons...
import "@storybook/addon-storysource/register";

And create a custom Webpack configuration file in .storybook/webpack.config.js:

.storybook/webpack.config.js

module.exports = function ({ config }) {
  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [require.resolve("@storybook/addon-storysource/loader")],
    enforce: "pre",
  });

  return config;
};

Now, if you restart your storybook server, you’ll see the following:

Storybook addon source

If you navigate to the “story” tab of the addons, at the bottom of the screen, you can see the correct code. Also, when you navigate between stories, the code for that story is automatically highlighted.

Storybook - Display code for render props components

Problem

Solution

Other things to read

Popular

Previous/Next