Storybook React Rsbuild Framework

3.3.3 · active · verified Tue Apr 21

storybook-react-rsbuild is a Storybook framework integration designed for React projects that leverage Rsbuild as their underlying build tool. It provides a fast and efficient development experience for React components in isolation, utilizing Rsbuild and Rspack for superior build performance and Hot Module Replacement (HMR) compared to traditional Webpack-based Storybook setups. The current stable version is `3.3.3`, with active development indicated by frequent patch and minor releases addressing bugs and introducing new features. This package acts as the bridge, allowing Storybook to seamlessly integrate with your existing Rsbuild configuration. It is crucial for projects aiming for optimized build times within the Storybook environment while working with React.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to configure Storybook to use `storybook-react-rsbuild` as its framework, define a simple React component, and create its corresponding Storybook stories in TypeScript. It also includes an example of customizing the underlying Rsbuild configuration.

import type { StorybookConfig } from 'storybook-react-rsbuild';
import { mergeRsbuildConfig } from '@rsbuild/core';

// .storybook/main.ts
const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-rsbuild',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  // Example of customizing Rsbuild config
  rsbuildFinal: async (currentConfig, { configType }) => {
    if (configType === 'PRODUCTION') {
      return mergeRsbuildConfig(currentConfig, {
        performance: { removeConsole: true },
      });
    }
    return currentConfig;
  },
};
export default config;

// src/components/Button.tsx
import React from 'react';

interface ButtonProps {
  label: string;
  primary?: boolean;
  onClick?: () => void;
}

export const Button: React.FC<ButtonProps> = ({ label, primary = false, onClick }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button type="button" className={['storybook-button', mode].join(' ')} onClick={onClick}>
      {label}
    </button>
  );
};

// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  title: 'Example/Button',
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};

view raw JSON →