#3 How to Visualise Your Components with React Styleguidist

A powerful living style guide for React components.

In previous stories I gave you few reasons why I use React’s ecosystem (#1) and Styled components (#2) to build web and mobile apps.

Now let’s bind those two topics together and learn how to create style guide of reusable components.

Why should I create any style guide at all?

Such a tool gives you:

1. Visual overview of all components you have.
2. Documentation and categorisation of components into logical groups.
3. Playground where you can try all possible variations of props and content.

My favourite tool is React Styleguidist.

There are certainly other great tools. Like Storybook for example. Its advantage is that besides React it supports also other JavaScript frameworks like Angular or Vue.

I just stick to Styleguidist because it has all I need.

Installation and setup

If you started your project using Create React App, then you just need to run this simple command:

npm install --save-dev react-styleguidist

If you started you project with different tools or setup, you also need to:

• install and configure Webpack,
• tell Styleguidist where your components are located.

Finally run the style guide with this command:

npx styleguidist server

And open it in your browser:

http://localhost:6060

Configuration

Create styleguide.config.js file in the root folder of your project. You get the ability to customise the style guide according to your needs. You can change the default port number, main title of style guide, component sections and many other options.

Start documenting your components

I recommend to read the official docs. Just few tips and tricks from me.