New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@latticejs/storybook-readme
Storybook readme addon helpers.
npm install @latticejs/storybook-readme
Last updated over 3 years ago
4
Downloads per week
Readme View on GitHub

@latticejs/storybook-readme

Private set of storybook readme addon helpers to be used within @latticejs packages.

Api

withReadme

function(readme: String) => (function(sections: Array)) Adds a Readme section tab for your Storybook.

Returns another function to be used as storybook HOC that injects some sections (joined) from readme passed as argument. See Usage for more info.

You must include the tags <!-- start:section_name --> and <!-- end:section_name --> to indicate the start and the end of your readme section to be included.

Usage

withReadme

To load some sections of your readme:

import { withReadme } from '@latticejs/storybook-readme';
import Readme from 'path/to/your/README.md';

const loadSections = withReadme(Readme);
const withSomeReadmeSections = loadSections(['api', 'usage']);

export default ({ storiesOf }) => {
  storiesOf('components', module)
    .add(
      'basic',
      withSomeReadmeSections(() => (
        <Basic />
      ))
    );
};

To load all the content of Readme:

import { withReadme } from '@latticejs/storybook-readme';
import Readme from 'path/to/your/README.md';

const withAllReadme = withReadme(Readme);

export default ({ storiesOf }) => {
  storiesOf('components', module)
    .add(
      'basic',
      withAllReadme(() => (
        <Basic />
      ))
    );
};
Join the community
6,060 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI