@smollweide/storybook-addon-jsx

5.4.0 • Public • Published


Storybook-addon-jsx

Build Status Total Download Current Version

This Storybook addon shows you the JSX of the story. It can be useful to see what props you set, for example.

Storybook Addon JSX Démo

Getting started

Installation:

yarn add --dev storybook-addon-jsx

Add to storybook

Append the following to file called addons.js in your storybook config (default: .storybook):

import 'storybook-addon-jsx/register';

If the file doesn't exist yet, you'll have to create it.

Usage

Import it into your stories file and then use it when you write stories:

import React from 'react';
import { setAddon, storiesOf } from '@storybook/react';
import JSXAddon from 'storybook-addon-jsx';

setAddon(JSXAddon);

const Test = ({ fontSize = '16px', fontFamily = 'Arial', align = 'left', color = 'red', children }) => (
  <div style={{ color, fontFamily, fontSize, textAlign: align }}>
    {children}
  </div>
);

storiesOf('test', module)
  .addWithJSX('Paris', () => (
    <Test fontSize={45} fontFamily="Roboto" align="center" color="#CAF200">
      Hello
    </Test>
  ))
  .addWithJSX('Orleans', () => <Test color="#236544">Hello</Test>);

storiesOf('test 2', module).addWithJSX('Paris', () => (
  <div color="#333">test</div>
));

You can also configure globally:

import { configure, setAddon } from '@storybook/vue';
import JSXAddon from 'storybook-addon-jsx';

setAddon(JSXAddon);

configure(loadStories, module);
import { storiesOf } from '@storybook/vue';

storiesOf('Vue', module)
  .addWithJSX('template property', () => ({ template: `<div></div>` }));

Options

You can pass options as a third parameter. Options available:

JSX

// Option displayName
storiesOf('test 2', module).addWithJSX(
  'Paris',
  () => <TestContainer>Hello there</TestContainer>,
  { displayName: 'Test' }, // can be a function { displayName: element => 'Test' }
);
// Output
// <Test>Hello there</Test>
//Option skip
storiesOf('test 2', module).addWithJSX(
  'Paris',
  () => (
    <div color="#333">
      <Test>Hello</Test>
    </div>
  ),
  { skip: 1 },
);
// Output
// <Test>Hello</Test>
  • onBeforeRender(domString: string) => string (default: undefined) : function that receives the dom as a string before render. The returned string is the string that will be rendered.

  • enableBeautify (default: true) : Beautify the template string

  • HTML options from js-beautify

//Option indent_size
storiesOf('test 2', module).addWithJSX(
  'Paris',
  () => ({
    template: `<Test>
Hello
                          </Test>`
  }),
  { indent_size: 2 },
);
// Output
// <Test>
//   Hello
// </Test>

Readme

Keywords

none

Package Sidebar

Install

npm i @smollweide/storybook-addon-jsx

Weekly Downloads

0

Version

5.4.0

License

MIT

Unpacked Size

427 kB

Total Files

16

Last publish

Collaborators

  • smollweide