React

React projects created using Create React App or Vite should work out of the box with Preview.js, even if you use CSS-in-JS libraries such as Styled Components or Emotion.

You can confirm this by testing Preview.js with a simple <HelloWorld /> component:

Assuming this works fine, it's time to try Preview.js with other components. It's important to understand that not every component will preview successfully, because Preview.js renders them in isolation. This means that if you try to preview a component that depends on a particular React context or some other global state, it will likely crash.

This can typically be remediated by mocking the required parts of your app and setting up React context providers in a "wrapper" component. You do this by creating a file named __previewjs__/Wrapper.tsx that exports a <Wrapper /> component.

Here is an example to ensure React Router and Redux play nice with Preview.js:

// __previewjs__/Wrapper.tsx

import React from "react";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import store from "../src/redux";
import "../src/index.css";

export const Wrapper = ({ children }) => (
  <Provider store={store}>
    <BrowserRouter>{children}</BrowserRouter>
  </Provider>
);