Skip to main content

Wrapper component

Supported frameworks

As of v0.1.8, this feature is not supported in Svelte and Vue.

Contributions are welcome!

You may wish to wrap your components into another component, especially if they rely on context providers.

You can automatically wrap each component by creating a wrapper component, which will receive the screenshot component in the children property:

/__viteshot__/ScreenshotWrapper.tsx
import React from "react";import styles from "./Wrapper.module.css";
export const Wrapper: React.FC = (props) => (  <div className={styles.Wrapper}>{props.children}</div>);

Then, update viteshot.config.js to point to the wrapper component:

/viteshot.config.js
module.exports = {  // ...  wrapper: {    path: "__viteshot__/ScreenshotWrapper.tsx",    componentName: "Wrapper",  },};
Do you use React Preview?

You can use the same wrapper component for both ViteShot and React Preview by copy-pasting the wrapper config in reactpreview.config.js.