Storybook story


What is Storybook?

1. Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use. Once you build out a component, Storybook lets you create a “story” file where you can then import your component and create various use case examples in an iFramed sandbox using that component. This provides an organized and focused environment to build new components and work on existing ones. See Here.

2. Storybook is a tool for UI development. It makes development faster and easier by isolating components. This allows you to work on one component at a time. You can develop entire UIs without needing to start up a complex dev stack, force certain data into your database, or navigate around your application.

My perception:

As far as I understand from reading the storybook documentation and a few more articles, (especially the article from freeCodeCamp) …

Storybook are great for developers or for creating documentation or presenting website designs and features to anyone.I describe the details with an example,

Suppose, I have a file or component made with JavaScript or React. Like, I have a component for the button. That component I can import from any other file for the button.

So on my project screen(means browser), I can only see one type of button once. If we change the design of the button from the component, the design will change and look new. But will not show a few buttons of several types at once.

In other words, suppose the current button component is round in shape. I want to change it to a square shape. So if I change the design to square then the previous round design will change to the square shape.

Storybook has come here and added their feature in such a way that I can put as many designs as possible in the component of my button or such is the design I want to do through the storybook file.

I will create a file in storybook way with my button component, where I can put together several designs.

Also, I can change the button style and design in the storybook browser and presenting it in several ways.

Summary: Through a storybook, can understand how a component’s UI design can look or feel better. It is not necessary to change the component repeatedly by additional code. And another thing is that the file that exists for the storybook is just run based on the dependency of the storybook and has to be built separately. It cannot be used directly in the React file. But yes, since many designs can be seen in the storybook at once. So can select a design by choice than change from the main component of React.




I am a web developer. I have excellent skills in web development. Worked in HTML, CSS3, Reactjs,Nextjs, Javascript, TypeScript, Bootstrap, and MaterialUI.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

macOS KEXT development: observing KEXT state

Dismissing a React Dropdown Menu by Clicking Outside its Container

Seven Sins of React Hooks API

CT: Integrate Adyen Payments with Commercetools

Navigate Your Way through React Router: Create a Nav Bar with Tailwind CSS

Working with Express, a Node.js Framework

Bare Import Cost

A bear…imported

A Mostly Sensible Account of Testing a React Native App

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ahsan Ullah

Ahsan Ullah

I am a web developer. I have excellent skills in web development. Worked in HTML, CSS3, Reactjs,Nextjs, Javascript, TypeScript, Bootstrap, and MaterialUI.

More from Medium

How Toppr Answr Website Speed Propelled By 8x

What the Hook?

Maintaining good SEO in React.js with @limeyfy/react-seo

The solution for not getting the latest value in the useEffect when passing the empty array([]) .