Wrapping components

By default, each component is rendered in a blank page.

If you rely on your components being rendered in a specific hierarchy such as a padded box or specific React providers, you may want to wrap components instead.

This is done by creating a Wrapper component, defined in the __previewjs__ directory at the root of your project (next to your package.json). You can also use this file to set up any global variables.

// __previewjs__/Wrapper.tsx

import React from 'react';
import "../src/index.css";

export const Wrapper: React.FC = ({ children }) => (
  <>
    <MyContext.Provider value={...}>
      <div className="wrapped">
        {children}
      </div>
    </MyContext.Provider>
  </>
);

You can customise the wrapper's location in preview.config.js:

// preview.config.js

import { defineConfig } from "@previewjs/config";

export default defineConfig({
  wrapper: {
    path: "src/PreviewWrapper.jsx",
    componentName: "default",
  },
});