Storybook Add-ons for the React component library

Ernesto F
4 min readMay 9, 2020
Photo by Roman Koval from Pexels

From time to time I go back to an old repository and update its dependencies.

This is the example repo I used on another blog post:

I use it as a starting point for creating a React component library or just to test some quick ideas.

A couple things where missing in that repo related to the Storybook settings. Specifically some Add-ons like: @storybook/addon-docs , @storybook/addon-a11y and @storybook/addon-viewport

Storybook Docs

The @storybook/addon-docs is the most important of all. It allows us to write stories with rich details using MDX (Markdown with JSX, https://mdxjs.com/)

To install it:

$ yarn add -D @storybook/addon-docs react-is babel-loader react-docgen-typescript-loader ts-loader

To configure we can remove the old .storybook/config.js file and add a new .storybook/main.tsx file.

module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
addons: [
'@storybook/addon-docs'
]
}

Also our .storybook/webpack.config.js needs a small change:

const path = require("path")

module.exports = ({ config }) => {
config.module.rules.push({
test: /\.tsx?$/,
include: path.resolve(__dirname, "../src"),
use: [
require.resolve("ts-loader"),
{
loader: require.resolve("react-docgen-typescript-loader"),
options: {
tsconfigPath…
Ernesto F

Software Engineer, Miami FL