More Ways to Extend React Storybook
We wanted React Storybook to be stable and customizable from day one. This came with a price: contributing to React Storybook was harder. That’s due to some technical limitations and strict rules we have imposed when accepting PRs.
So, we started to look for new ways to extend React Storybook while maintaining its stability.
We think we found some great ways to do so. Let’s discuss.
React Storybook Extensions
Today, we are introducing an extension API with which you can write extensions to React Storybook. You can simplify writing stories and introduce new functionalities.
You can also share extensions you’ve built and use extensions created by others.
Let’s have a closer look at the extensions API.
Decorators
A decorator is a way to wrap a story with a common set of components. Let’s say you are using the Material UI and you need to wrap all your stories with a theme. This is how to do it with a decorator:
You can also add this decorator globally if you need to apply it for all of your stories. This is how to do that:
Addons
With addons you can add new functionalities to React Storybook. Let’s say you need to show propTypes, the source and some other information along with your story, then our info addon is the solution you need.
Using it, you can show more details inside your story like this:
This add-on is customizable and you can use it how you want. Have a look at the add-on's README for more information.
Just like this add-on, you can your own add-ons as well. To do so, check out our extensions documentation.
Storybook UI
Until today, if you needed to add a new UI-related feature, then you needed to hack our main react-storybook repo. This was not a pleasant experience. So, contributing to the React Storybook UI was pretty hard.
So, we isolated the Storybook UI into a new project. Extending it is now pretty simple and you don’t need to worry about react-storybook stuff at all.
Have a look at the storybook-ui repo for more information:
You can use the Storybook UI to display anything you want. You could build a presentation viewer or remotely control your IOT devices.
Adding New Platforms
React Storybook is just the start; we always wanted to implement Storybook for other platforms. Now Storybook UI will help us to do this pretty easily. We have already started porting storybook to React Native, which will be ready soon.
Even at this stage, it’s working pretty well. We need to polish it up a bit before releasing it to the public.
Give it a try and help us to fix some burning issues.
Using this way, it’s pretty simple to add support for other platforms, like Angular2, Vue and even Swift.
Extend, Share and Help Us
Use all these APIs and goodies to customize React Storybook as you want. If you think up something that could be useful for others, share it as an extension or create a pull request. We are pretty happy to see your contributions and to work with you.
Follow KADIRA VOICE for more articles like this.
