New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,441
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-asset-code
An addon to Storybook that allows for display of asset files in assorted languages.
npm install storybook-addon-asset-code
Last updated about 3 years ago
1
Downloads per week
Readme View on GitHub

Storybook Addon Asset Code

An addon to Storybook that allows for display of asset files in assorted languages.

Framework Support

Screenshot

Why

In building out component libraries, there may arise a need to display more assets than default Storybook story allows. This addon will allow you to pass in any file contents as a string and display them in a formatted manner.

Getting Started

Install:

npm i -D storybook-addon-asset-code

Then, add following content to .storybook/addons.js

import 'storybook-addon-asset-code/register';

In the .storybook/config.js file, import the withCode decorator.

import { withAssetCode } from 'storybook-addon-asset-code';

addDecorator(withAssetCode);

Now, you can use the assetcode parameter to add a note to each story. This parameter accepts an array of objects that contain the asset language and a string of the file contents.

Supported langages and keys can be found here.

raw-loader is installed with this package in order to load the file contents as a string.

Note: Using a !! before a request will disable all loaders specified in the configuration. This will allow for the contents to be passed as a string.

import cssFile from '!!raw-loader!./button.css';

storiesOf('Button', module).add(
  'Default',
  () => {
    return <Button>Hello Button</Button>
  },
  {
    assetcode: [
      { css: cssFile },
    ],
  }
);
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI