Setting a Composition Context

Compositions often use the same context. One example of that is a common theme. Instead of manually wrapping each composition with providers, set your Env to inject a pre-configured set of provider components.

To configure one or more composition contexts, create an Env extension and use the registerProvider() API in the Env's .preview.runtime.ts file, to set the components to use as permanent context.

registerProvider(provider: any[]): void
CopiedCopy

For example:

// ...
import styles from './theme.module.scss'

const Theme = ({
  children,
  ...rest
}) => {
  return (
    <div className={styles.theme} {...rest}>
      {children}
    </div>
  );

export class MyReactPreviewMain {

 // ...

  static async provider([react]: [ReactPreview]) {
    const myReactPreviewMain = new MyReactPreviewMain();
    // register a new provider to wrap all compositions using this environment with a custom theme.
    react.registerProvider([Theme]);

    return myReactPreviewMain;
  }
}

// ...
CopiedCopy