<commit_before># 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.

![Storybook Addon JSX Démo](screenshot.png)

## Getting started

` yarn add --dev storybook-addon-jsx `

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

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

Then use it when you write stories :

```javascript

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](https://github.com/algolia/react-element-to-jsx-string)

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

```javascript
//Option skip
storiesOf('test 2', module).addWithJSX(
  'Paris',
  () => (
    <div color="#333">
      <Test>Hello</Test>
    </div>
  ),
  { skip: 1 },
)
// Output
// <Test>Hello</Test>
```<commit_msg>update readme for reflect compatilibty version<commit_after># 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.

![Storybook Addon JSX Démo](screenshot.png)

## Getting started

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

` yarn add --dev storybook-addon-jsx@2.1.2 `

otherwise for react-dom >= 15.5.0 use :

` yarn add --dev storybook-addon-jsx `

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

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

Then use it when you write stories :

```javascript

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](https://github.com/algolia/react-element-to-jsx-string)

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

```javascript
//Option skip
storiesOf('test 2', module).addWithJSX(
  'Paris',
  () => (
    <div color="#333">
      <Test>Hello</Test>
    </div>
  ),
  { skip: 1 },
)
// Output
// <Test>Hello</Test>
```
{'fraction_non_alphanumeric': 0.1715810879511947, 'fraction_numerical': 0.014997458057956279, 'mean_word_length': 4.064350064350064, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 54, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1609280', 'n_tokens_mistral': 1425, 'n_tokens_neox': 1358, 'n_words': 364}