addon-jsx's Introduction

Storybook-addon-jsx

This Storybook addon show you the JSX of the story. It can be usefull to see what props you set for example.

Getting started

If you use a react-dom version under 15.5.0 then use :

yarn add --dev [email protected]

otherwise for react-dom >= 15.5.0 use and storybook v3:

yarn add --dev storybook-addon-jsx

Create a file called addons.js in your storybook config (default: .storybook) :

import '@kadira/storybook/addons'
import 'storybook-addon-jsx/register'

Then use it when you write stories :

import React from 'react'
import { setAddon, storiesOf } from '@kadira/storybook'
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>
))

OPTIONS

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

skip (default: 0) : Skip element in your component to display
Options from react-element-to-jsx-strin

// 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>

Recommend Projects