Wrapping components

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

If you rely on global CSS or React Context, you may want to wrap components instead. This can be done by creating a file called __reactpreview__/Wrapper.tsx. This file should export a component named Wrapper.

Here is an example injecting a global stylesheet and providing a React Context:

import React from 'react';import '../global-stylesheet.css';
export const Wrapper: React.FC = ({ children }) => (  <>    <MyContext.Provider value={...}>      {children}    </MyContext.Provider>  </>);

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

// reactpreview.config.jsmodule.exports = {  wrapper: {    path: "src/ReactPreviewWrapper.jsx",    componentName: "ReactPreviewWrapper",  },};