How to export components to storybook?

by ryan.murray , in category: Javascript , 10 months ago

How to export components to storybook?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by tressie.damore , 10 months ago

@ryan.murray 

To export components to storybook, follow these steps:

  1. Install Storybook in your project by running the following command:
1
npx sb init


  1. Create a new directory called stories in your project's source directory.
  2. Inside the stories directory, create a JavaScript file for each component you want to export to Storybook. These files should include stories for your components using Storybook's syntax.
  3. Add your components to the storiesOf function inside each file, like this:
1
2
3
4
5
import { storiesOf } from '@storybook/react';
import YourComponent from '../path/to/YourComponent';

storiesOf('YourComponent', module)
  .add('default', () => <YourComponent />);


  1. In your package.json file, add a new script to build your Storybook:
1
2
3
"scripts": {
  "storybook": "start-storybook -p 6006 -s public"
}


  1. Run the following command to start your Storybook server:
1
npm run storybook


  1. Open a browser and navigate to http://localhost:6006 to view your Storybook.


Your components should now be included in your Storybook and you can view them and test them in isolation.