Basic button:

import Button from '../Button';
<Button>Push Me</Button>

Big pink button:

import Button from '../Button';
<Button size="large" color="deeppink">
  Click Me
</Button>

And you can use any Markdown here.

Fenced code blocks with js, jsx or javascript languages are rendered as a interactive playgrounds:

import Button from '../Button';
<Button>Push Me</Button>

You can add a custom props to an example wrapper (```js { "props": { "className": "checks" } }):

import Button from '../Button';
<Button>I’m transparent!</Button>

Or disable an editor by passing a noeditor modifier (```js noeditor):

import Button from '../Button';
<Button>Push Me</Button>

To render an example as highlighted source code add a static modifier: (```js static):

import React from 'react'

Fenced blocks with other languages are rendered as highlighted code:

<h1>Hello world</h1>

Current component (like Button in this example) is always accessible by its name in the example code. If you want to use other components, you need to explicitly import them:

import Placeholder from '../Placeholder';
import Button from '../Button';
<Button>
  <Placeholder />
</Button>

Or you can explicitly import everything, to make examples easier to copy into your app code:

import React from 'react';
import Button from '../Button';
import Placeholder from '../Placeholder';
<Button>
  <Placeholder />
</Button>

Note: rsg-example module is an alias defined by the moduleAliases config option.

Each example has its own state that you can access at the state variable and change with the setState function. Default state is {}:

import Button from '../Button';
<div>
  <Button
    size="small"
    onClick={() => setState({ isOpen: true })}
    disabled={state.isOpen}
  >
    Show Me
  </Button>
  {state.isOpen && (
    <Button size="small" onClick={() => setState({ isOpen: false })}>
      Hide Me
    </Button>
  )}
</div>

You can change the default state:

import Button from '../Button';
initialState = { count: 42 };
<Button onClick={() => setState({ count: state.count + 1 })}>
  {state.count}
</Button>

You can also use hooks in the examples, like the useState hook, as shown below:

import Button from '../Button';
const [count, setCount] = React.useState(42);
<Button onClick={() => setCount(count + 1)}>{count}</Button>