React Showroom v1.21.0
DocsGitHub
In this page

Component Playground

By using usePropsEditor custom hook (available at react-showroom/client) in your example, you can create a playground for your components (similar to Storybook's Controls/Knobs).

You don't have to manually configure the controls because we extract the props from your props definition and provide sensible default controls.

Simple Example

src/components/button.mdx
```jsx
import { usePropsEditor } from 'react-showroom/client';
const Demo = () => {
const propsEditor = usePropsEditor();
return (
<Button {...propsEditor.props} onClick={() => console.log('Clicked')}>
Hello
</Button>
);
};
<div>
<Demo />
<p>Click the "Props" button below to view the controls for props.</p>
</div>;
```
mdx
http://localhost:6969/

Button

NAMETYPEDESCRIPTION
variant"primary" | "secondary"
fullWidthboolean
rounded"sm" | "lg"

Click the "Props" button below to view the controls for props.

Setting Initial Props

By passing initialProps options to usePropsEditor, you can set the initial values for props in the playground.

Note that by default, if typescript able to infer the default value from your code, we will use that. So this should only be used if you do not want the default for your code or a workaround when typescript could not infer the default value.

src/components/button.mdx
```jsx
import { usePropsEditor } from 'react-showroom/client';
const Demo = () => {
const propsEditor = usePropsEditor({
initialProps: {
variant: 'secondary',
rounded: 'sm',
},
});
return (
<Button {...propsEditor.props} onClick={() => console.log('Clicked')}>
Hello
</Button>
);
};
<Demo />;
```
mdx
http://localhost:6969/

Button

NAMETYPEDESCRIPTION
variant"primary" | "secondary"
fullWidthboolean
rounded"sm" | "lg"

Adding/Overwriting Control

By default, usePropsEditor will try to infer the control for you based on the props definition. However, we will not infer the props control for the following conditions:

  • props that are not supported by our available controls. For instance, you may have a custom object as props, which we could not know how to provide a default control.
  • props that comes from @types/react. If we include those, it will be a giant list of controls.

Fortunately, you can add those manually by passing controls options to usePropsEditor.

src/components/button.mdx
```jsx
import { usePropsEditor } from 'react-showroom/client';
import { PencilIcon } from '@heroicons/react/solid';
const childrenOptions = [
{
label: 'Text only',
value: 'Button',
},
{
label: 'Text with icon',
value: (
<>
<PencilIcon width={20} height={20} />
Edit
</>
),
},
];
const Demo = () => {
const propsEditor = usePropsEditor({
initialProps: {
children: 'Button',
},
controls: {
children: {
type: 'select',
options: childrenOptions,
},
className: {
type: 'text',
},
disabled: 'checkbox',
style: 'object',
tabIndex: 'number',
color: 'color',
},
});
const { color, ...btnProps } = propsEditor.props;
return (
<div style={color ? { backgroundColor: color } : undefined}>
<Button {...btnProps} />
</div>
);
};
<Demo />;
```
mdx
http://localhost:6969/

Button

NAMETYPEDESCRIPTION
variant"primary" | "secondary"
fullWidthboolean
rounded"sm" | "lg"

controls options is a key-value object where the key is the prop, and the value is the configuration of the control.

Currently, we support the following control types:

type
text
checkbox
number
select
date
file
object
color

Notes:

  • Except for select, you can provide the config as string (e.g. 'number') or as an object (e.g. { type: 'number' }).
  • For select, you must provide the options, which is an Array of { label: string; value: any }. The value can be anything, including JSX.