Skip to main content

Custom previews

Sometimes, automatically generated props aren't quite good enough.

You can easily tell React Preview to use preset properties with a few lines of code:

import { preview } from "@reactpreview/config";
const MyComponent = ({ label }) => <div>{label}</div>;
preview(MyComponent, {  example: {    label: "Hello, World!",  },});

You can set up as many custom previews as you like. React Preview will let you instantly switch between them.

See it in action#

info

For this particular feature to work, you will need to install @reactpreview/config in your project. Don't worry, it won't bloat your project. Here's the entire implementation of the package on NPM:

module.exports = {  config: (config) => config,  preview: (component) => component,};