Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Load React Storybook Stories Dynamically

    Arunoda SusiripalaArunoda Susiripala
    react-storybookReact Storybook

    React Component stories can be dynamically loaded into React Storybook instead of doing it manually every time.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    00:00 Here we have a running Storybook, and we have few stories. We define our stories inside the stories directory, inside this indecipherable directory.

    00:08 It could be really nice if we can define stories right inside the components directory. For example, for the main section component, if we can write stories in a file called mainsection.stories.js, that would be interesting. That's what we're going to do right now.

    00:24 Now let's open our config.js file inside our .storybook directory. Now we're going to use a feature in webpack called require.context. They're trying to create a custom require function. Let's do that.

    00:41 I'm going to type constreq, and I'm typing require.context. I need to go base directory, where I am looking files at, it's ready to be a /c/component.

    00:56 I want to look at all the subdirectories inside this directory, so I give it true. Let's make my editor bigger.

    01:06 Now I'm going to create a regular expression to match my stories files. That should be .stories.js extension. That's it.

    01:19 Now I have a custom require function. It's time to use this new require function we just created. I can remove this line. Existing line we have reload stories, and then I will type in req.key.

    01:35 This will give us all the match files for this extension inside the components directory. I am iterating over that, and I'm loading those files, actually requiring those files.

    01:47 For that, I'm going to use this path and I'm going to require using this new require function we just created, and path, and I hit save.

    02:00 Then I can reload my storybook, and there won't be any stories. That's because we haven't created a file like this inside my components directory.

    02:11 Let's create our first stories.js file. Let's go inside our existing stories directory, and I'm going to rename this mainsection.js file as mainsection.stories.js. Then I'm going to copy this file and paste it inside the components directory.

    02:36 Now we have a file called mainsection.stories.js inside my components directory, and I can see there are some stories inside the mystorybooks loaded from this stories.js file. I can reload it and confirm it's working properly.

    02:52 Now I can even remove my stories directory completely because I'm not loading stories from this directory any more.

    03:01 Just like this, you can depend any pattern you like as require.context and load stories from wherever you want inside your project.