React Storybook logo

React Storybook

Develop and design React components without an app
138
97
+ 1
0

What is React Storybook?

You just load your UI components into the React Storybook and start developing them. This functionality allows you to develop UI components rapidly without worrying about the app. It will improve your team’s collaboration and feedback loop.
React Storybook is a tool in the MVC Tools category of a tech stack.
React Storybook is an open source tool with 43.8K GitHub stars and 3.9K GitHub forks. Here’s a link to React Storybook's open source repository on GitHub

Who uses React Storybook?

Companies
62 companies reportedly use React Storybook in their tech stacks, including Huddle, Web, and AppsFlyer.

Developers
68 developers on StackShare have stated that they use React Storybook.

React Storybook Integrations

Why developers like React Storybook?

Here’s a list of reasons why companies and developers use React Storybook
Top Reasons
Be the first to leave a pro
React Storybook Reviews

Here are some stack decisions, common use cases and reviews by companies and developers who chose React Storybook in their tech stack.

Zarema Khalilova
Zarema Khalilova
Frontend Team Lead at Uploadcare · | 9 upvotes · 29.5K views
atUploadcareUploadcare
React Storybook
React Storybook
React
React
Webpack
Webpack
#Frontend

React Storybook is one of the most favorite tools in our #Frontend team. When we start a new frontend part, we install storybook at first and create visual React components based on our design with usage stories in Storybook. So, we get a live version of design quickly and can sync with designers before developing of whole app and configure Webpack.

See more
Adam Neary
Adam Neary
Engineer at Airbnb · | 8 upvotes · 349.3K views
atAirbnbAirbnb
React Storybook
React Storybook
Zeplin
Zeplin
Figma
Figma
Apollo
Apollo
#ReactDesignStack
#StorybookStack
#StorybookDesignStack

The tool we use for editing UI is React Storybook. It is the perfect place to make sure your work aligns with designs to the pixel across breakpoints. You get fast hot module reloading and a couple checkboxes to enable/disable browser features like Flexbox.

The only tricks I apply to Storybook are loading the stories with the mock data we’ve extracted from the API. If your mock data really covers all the various various possible states for your UI, you are good to go. Beyond that, if you have alternative states you want to account for, perhaps loading or error states, you can add them in manually.

This is the crux of the matter for Storybook. This file is entirely generated from Yeoman (discussed below), and it delivers the examples from the Alps Journey by default. getSectionsFromJourney() just filters the sections.

One other hack you’ll notice is that I added a pair of divs to bookend my component vertically, since Storybook renders with whitespace around the component. That is fine for buttons or UI with borders, but it’s hard to tell precisely where your component starts and ends, so I hacked them in there.

Since we are talking about how all these fabulous tools work so well together to help you be productive, can I just say what a delight it is to work on UI with Zeplin or Figma side by side with Storybook. Digging into UI in this abstract way takes all the chaos of this madcap world away one breakpoint at a time, and in that quiet realm, you are good down to the pixel every time.

To supply Storybook and our unit tests with realistic mock data, we want to extract the mock data directly from our Shared Development Environment. As with codegen, even a small change in a query fragment should also trigger many small changes in mock data. And here, similarly, the hard part is tackled entirely by Apollo CLI, and you can stitch it together with your own code in no time.

Coming back to Zeplin and Figma briefly, they're both built to allow engineers to extract content directly to facilitate product development.

Extracting the copy for an entire paragraph is as simple as selecting the content in Zeplin and clicking the “copy” icon in the Content section of the sidebar. In the case of Zeplin, images can be extracted by selecting and clicking the “download” icon in the Assets section of the sidebar.

ReactDesignStack #StorybookStack #StorybookDesignStack
See more
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 8 upvotes · 93.5K views
atStackShareStackShare
React Storybook
React Storybook
React
React
Rails
Rails
Apollo
Apollo
GraphQL
GraphQL

Our front-end team decided to use React Storybook for our primary React development environment. It allows us to write components in isolation without the need to fire up our Rails stack. When writing components in isolation; you can focus on styling, behaviour and prop design. It forces you to think about how your component is going to be used by others. React Storybook uses webpack and hot module reloading under the hood. This allows us to write components very quickly since it hot reloads in the browser as you code!

The knobs add-on is great for testing different edge cases for the component props. There is even an add-on that will auto-render and snapshot your components with every prop permutation allows by your defined knobs. These snapshots can then be part of your CI testing.

We have a step in our build process that publishes a static React Storybook site on our production server. This allows our entire team to interactively test components before they are integrated into larger features. Once we are happy with our components in isolation, we integrate them into connected feature components which are wired up to Apollo and GraphQL to provide the data and state.

There are heaps of React Storybook add-ons to checkout. If you aren't using it, you should be.

See more
Adam Neary
Adam Neary
Engineer at Airbnb · | 6 upvotes · 313.9K views
atAirbnbAirbnb
Happo.io
Happo.io
React Storybook
React Storybook

Happo.io is a straight up life-saver. It is the only screenshot testing tool I’ve ever used, so I would not be sophisticated enough to compare it to alternatives, if there are any, but the essential idea is that you push code, and it goes off and renders all the components in your PR, comparing it with the version on master.

This means if you edit a component like <Input /> it will show you the impact on components that use Input, including the Search Bar you accidentally modified. It. Is. Fabulous.

How many times did you think your change was contained only to discover that ten other teams started using what you built, and your change breaks three of the ten? Without Happo, you might not know.

Until lately, the only downside with Happo was that our React Storybook variations (the input to the screenshot testing process) did not always reflect reliable data adequately. Now that Storybook is leveraging API data, we can feel much more confident. Plus, as our demo explores, it is automatic. If you add a field to the query and then the component, Happo will automatically post the diff to your PR, letting the engineers, designers, and product managers sitting next to you see the visual consequences of the change you have made.

See more
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 6 upvotes · 61.1K views
atStackShareStackShare
Jest
Jest
Enzyme
Enzyme
React Storybook
React Storybook
Happo.io
Happo.io
Percy
Percy

We use Jest because when we rebooted our "front end" stack earlier last year, we need to have a testing solution (we didn't have any front-end tests before that!). Jest is fast and convenient and it has plenty of community support behind it. It let's us run our unit tests with Enzyme and snapshot tests.

This is an area that we are constantly reviewing to see what can be improved, both in terms of developer needs, accuracy, test maintainability, and coverage.

I'm currently exploring using React Storybook to be the record of snapshot tests and using some online services, such as Happo.io and Percy in our CI pipeline.

See more
Russel Werner
Russel Werner
Lead Engineer at StackShare · | 6 upvotes · 8.5K views
atStackShareStackShare
React Storybook
React Storybook
React
React

https://auth0.com/blog/our-engineering-experience-with-react-and-storybook/

This is Auth0's overview of how they use React Storybook and React to create modular and reusable components that can be shared across projects by building a component library. A very similar approach to how we do it at StackShare!

See more

React Storybook's Features

  • Isolated environment for your components (with the use of various iframe tactics).
  • Hot module reloading (even for functional stateless components).
  • Works with any app (whether it's Redux, Relay or Meteor).
  • Support for CSS (whether it's plain old CSS, CSS modules or something fancy).
  • Clean and fast user interface.
  • Runs inside your project (so, it uses your app's NPM modules and babel configurations out of the box).
  • Serves static files (if you host static files inside your app).
  • Deploy the whole storybook as a static app.
  • Extendable as necessary (support for custom webpack loaders and plugins).

React Storybook Alternatives & Comparisons

What are some alternatives to React Storybook?
Storybook
It is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
PrimeNg
It has a rich collection of components that would satisfy most of the UI requirements of your application like datatable, dropdown, multiselect, notification messages, accordion, breadcrumbs and other input components. So there would be no need of adding different libraries for different UI requirements.
LINQPad
It is used to interactively query SQL databases using LINQ, as well as interactively writing C# code without the need for an IDE. It supports all the LINQ APIs in the .NET Framework, including LINQ to XML, PLINQ, LINQ to SQL and Entity Framework.
Structor
Structor is a visual development environment for node.js Web applications with React UI. The essential part of the builder is a project boilerplate. The boilerplate is a prepacked source code of node.js application in which metainfo included.
Laravel Nova
It is a beautifully designed administration panel for Laravel. Carefully crafted by the creators of Laravel to make you the most productive developer. It provides a full CRUD interface for your Eloquent models. Every type of Eloquent relationship is fully supported.
See all alternatives

React Storybook's Followers
97 developers follow React Storybook to keep up with related blogs and decisions.
Ezzat AbuAzzah
praveen kumar
Frank Jheng
Dung LT
Enver Daniel Francisco Báez
Luc Ho Dac
Khanh62169034
Daniel Lombardo
Taylor Griffin
Sai Chimata