Making Custom Stories

Custom stories in Storybook

To put in our own components, we can create a new story collection by adding a new file to the src/stories/ directory, which we call collatz.stories.js. The new file begins by importing the components to be used. Each file creates one grouping. That grouping is defined with an export default command that names the component and gives the group a title. Next, one or more stories are given as the export of a function that takes no input and returns an element. Finally, there’s an opportunity to rename the story by providing a name field to the function.

Try it yourself

See how the component will look like in the widget below by pressing “Run” and clicking on the link below once the server has started running.