Developing better UI components with Storybook

UI developers are always on the look-out for a tool to make their lives easier. Storybook helps developers test their UI components in an isolated environment. What’s been added in the newly released version 4.0?

Want your UI to look as sleek as your favorite storybook? The new Storybook 4.0 release has new improvements, features, and support. Front-end developers take note: you can test your app components with style.

Before we dive into the new additions, let’s first look at what Storybook is capable of, and what the goal of this project is.

You can build quickly without having to worry about application-specific dependencies….Storybook’s easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.

Take advantage of the add-on gallery for a higher level of customization and testing. (Note: Be sure to see the Add-on/Framework support table first, because not all add-ons are supported by all frameworks.) Some choice add-ons include the ability to build demos from UI components, add notes, edit React props, write test specs, and support Google Analytics.

Add-ons are so useful because as the release post states, “Storybook and its addons are view layer agnostic. This means every time someone adds a feature or fixes a bug it benefits every user no matter which framework they choose.” You can even create your own add-ons if there isn’t already one that fits your needs.

Mobile support: Need to test on the go? Browse the example on your phone to see the mobile design in action. Here is how it looked on my phone:

For those who are familiar with an older version of Storybook, make sure to look at the deprecation list to see what’s been removed or changed.

Easier, better React Native support. No need to connect to a server in order to run Storybook as an app. Check out the detailed changes and additional features in this post by software engineer Gytis Vinclovas.

Sarah Schlothauer is an assistant editor for JAXenter.com. She received her Bachelor's degree from Monmouth University in Long Branch, New Jersey and is currently enrolled at Goethe University in Frankfurt, Germany where she is working on her Masters. She lives in Frankfurt with her husband and cat.