Wrapper component

You can create a wrapper component that will be used to render every component preview.

This is useful to:

• set up global styles
• set up global context providers
• set up routing
• set up any other global configuration

Configuration

Create a wrapper component in the __previewjs__ directory at the root of your project:

// __previewjs__/Wrapper.tsx

import { ReactNode } from "react";

export function Wrapper({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

Examples

Here are some examples of what you can do with a wrapper component.

Global styles

// __previewjs__/Wrapper.tsx

import { ReactNode } from "react";
import "../src/styles.css";

export function Wrapper({ children }: { children: ReactNode }) {
  return <div>{children}</div>;
}

Context providers

// __previewjs__/Wrapper.tsx

import { ReactNode } from "react";
import { ThemeProvider } from "../src/theme";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

export function Wrapper({ children }: { children: ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>{children}</ThemeProvider>
    </QueryClientProvider>
  );
}