Our teams has recently started using Storybook for react application that we are building.
What is Storybook?
Storybook is an user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.
Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.
Why Storybook ?
As storybook allows you to run and view your react components in isolated manner, so imagine developing a component and firing it up itself.
Assuming your component receives props as input, storybook allows you to pass in some props values when instantiating it. It also has several handy add-ons that allow you to parametrise your props and try different values when viewing your component.
Storybook runs its own web server, separate from your react app, and provides catalogue view for components that you choose to use it with.
Getting Started:
The easiest way to get started with Storybook is to use the getstorybook tool, a CLI that scans your app and will make small changes to get storybook working.
First create react application using following command:
npx create-react-app my-app
cd my-app
npx -p @storybook/cli sb init
After this command a react project with configured storybook will be created.
To run this storybook project run command npm run storybook in terminal.
Then it will open browser on port 9009 , Congrats, you have successfully created storybook project.
By default Welcome and Button stories are created.
Writing Stories:
The primary purpose of a component explorer is to allow you to isolate and work on a component in by itself, rather than in the larger context of a complete application.
To do this, you describe exactly the inputs the component should see — the “state” of the component. The explorer will then simply render the component in that state. This is advantageous because it allows you get the component just the way you need, without having to manipulate a larger application to achieve that state in the context of the whole app.
To get the component into the state you want to write a story, which is Storybook’s API for describing states in terms of a rendered React element — i.e. a component and set of props:
storiesOf("Stories of Tasks", module)
.add("Task", () => (
<div style={{ height: "100vh", overflowX: "hidden", background: "#f8f8f8" }}>
<Task title={"To Do"} taskName={"Learn Storybook integration!!"}/>
