Power Tools for React Storybook
Over the last few weeks, we’ve added a bunch of new features to React Storybook. Let me introduce some of them.
Most of the following features came to light with community contributions. I want to thank our community contributors for sending pull requests and for their feedback.
Let’s have a look at these new features.
Keyboard Shortcuts and Full-Screen Mode
Now we’ve added support for a set of keyboard shortcuts that allow you to toggle UI elements in React Storybook quickly. For example, you can hide the left panel and action logger easily to give more space for your components.
We’ve also introduced a full-screen mode, which renders only the story.
Responsive Design Tools
Actually, this is an outcome of the full-screen mode. After you’ve enabled full-screen mode, you can simply use the browser’s inbuilt responsive design tools to see what your components would look like on different screens.
Watch this video to learn about how to use Chrome’s responsive design tools with React Storybook.
Other than browser tools, you can also use web services such as Google Resizer.
Deploy Storybook to GitHub Pages
Now React Storybook comes with a static builder. By using it, you can export React Storybook into a set of static files, so you can deploy a storybook anywhere you like.
If you are using GitHub to host your repo (like most of us), you can use Storybook Deployer to deploy your storybook into GitHub pages using a single command.
Here’s an example:
Story Permalink Support
Now you can get a permalink to your current storybook. You can use the current URL as the permalink for a story. This is helpful if you’ve deployed your storybook into GitHub pages or similar.
Prototyping with Storybooks (Like framer.js or Invision)
Although React Storybook is not a direct prototyping tool, you can link stories together. This means you can quickly demo your app without building a backend or binding it into your app.
This is really handy if your designers know React. Then your team can work directly with React components even in the prototyping stage of your app. This is also helpful for visualizing workflow changes in addition to UI changes.
A Lot of New Ways to Configure
At the very beginning, configuring a storybook was limited. Now you can configure it as you want. Those configurations include writing your own webpack configurations and adding custom HTML to the head section.
See React Storybook’s configuration guide for more information.
This Is Not the End
Last week, we almost rewrote Storybook in making it modular. Most importantly, now our Manager UI follows the Mantra architecture. So that helps us to reuse a lot of code and we will add more platforms to Storybook, starting with React Native.
We are also building storybooks.io, which allows you to review your UI code very efficiently using Storybook. It’s totally FREE for open-source projects and we are looking to release a private beta at the end of this month.
Use React Storybook and share your experiences. If you have a question or find a bug, just post it on our issue list. If you like it, share it with your friends, and tweet and talk about it.
Follow Kadira Voice for more articles like this.
