https://github.com/nutgaard/react-storybook-addon-sections

https://github.com/nutgaard/react-storybook-addon-sections

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/nutgaard/react-storybook-addon-sections
• Owner: nutgaard
• License: mit
• Created: 2017-02-27T09:57:58.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-07T11:03:34.000Z (over 7 years ago)
• Last Synced: 2024-04-24T13:45:34.442Z (9 months ago)
• Language: JavaScript
• Size: 2.13 MB
• Stars: 6
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React Storybook Sections Addon

A React Storybook addon to show additional information for your stories.

[DEMO](http://www.utgaard.xyz/react-storybook-addon-sections)

## Usage

Install the following npm module:

```sh

npm i -D react-storybook-addon-sections

```

Then set the addon in the place you configure storybook like this:

```js

import React from 'react';

import { configure, setAddon } from '@storybook/react';

import sectionsAddon from 'react-storybook-addon-sections';

setAddon(sectionsAddon);

configure(function () {

  ...

}, module);

```

Then create your stories with the `.addWithSections` API.

```js

import React from 'react';

import Button from './Button';

import { storiesOf } from '@storybook/react';

storiesOf('Button')

    .addWithSections('Global sections', () => (

        Simple

    ))

    .addWithSections('Single section', () => (

        Simple

    ), ReactView);

```

> Have a look at [this example](example/story.js) stories to learn more about the `addWithSections` API.

## The FAQ

**Components lose their names on static build**

Component names also get minified with other javascript code when building for production. When creating components, set the `displayName` static property to show the correct component name on static builds.