This video is available to students only

Setting up Storybook

Setup Storybook to view and test our code.

What is Storybook?#

Storybook is a tool for viewing and interacting with UI (user interface) components. There are plugins for a wide array of frameworks including React, Angular, Vue, and many more. Storybook gives us a sandbox to test our React code. It also gives us a nice website we could publish to our users to allow them to demo our library! We'll be utilizing Storybook to check that useScroller is working correctly without needing to deploy our library.

Setting up Storybook#

Get started setting up Storybook by using their initialization installer npx sb init at the root of Scroller. npx is a tool which comes with npm for running scripts found in node_module/.bin or remotely. If a script isn't found locally, npx will download the required scripts from npm and run it. sb is a Storybook initialization script. sb will scan our project for the correct frontend framework to use, in our case React, and add Storybook to Scroller's devDependencies.

A stories/ directory is automatically created in the src/ directory.

In the stories/ directory, delete all the files contained within. These are all autogenerated files created by sb init which we'll be replacing.

Writing our first story#

Create a new file called useScroller.stories.js inside the src/stories directory. Files suffixed with .stories tell Storybook which files to look for when generating its own files. A story is a place to visually share and test frontend code. We can have a group of stories for a single component to show different implementations of a component. Or, create one story per component.


This page is a preview of Creating React Libraries from Scratch

Start a new discussion. All notification go to the author.