Wrapper components

👉 You can provide a wrapper component to supply required context and styles to your components.

Using an existing wrapper component

If the packages the CLI is importing already export a wrapper component you can configure this in the advanced settings page of the import wizard, or add it directly to the interplay.json settings file.

The setting takes the form packagename/ExportName:

//e.g. package  
"wrapperComponent": "mypackagename/ThemeProvider" 

//e.g scoped package  
wrapperComponent": "@myscope/mypackagename/ThemeProvider"

Interplay will wrap your components in this wrapper component wherever it displays your components. Your wrapper component must be exported from the package specified and this package must be one that you are importing to Interplay (otherwise Interplay doesn't know about it).

If your components require a theme to be present, your wrapper component should set a default theme.

Create a custom wrapper component

If you don't have an existing wrapper component you can implement a custom wrapper as follows.

1. Create the wrapper component code

Create a wrapper component that supplies any required Providers.

  • It should accept and render the children prop
  • It should set default values for any required props such as theme. (Interplay will support passing configuration to the wrapper)

Here is an example wrapper. As you can see, you can use multiple layers of providers if required:

import React from 'react';
import {Provider as StyletronProvider} from 'styletron-react'; 
import {Client as Styletron} from 'styletron-engine-atomic'; 
import {BaseProvider} from '../../src/index.js'; 
import {LightTheme} from '../../src/themes/index.js'; 
const engine = new Styletron(); 
export constThemeWrapper = ({children}) =
 (     
	<StyletronProvidervalue={engine}>
		<BaseProvider theme={LightTheme}>{children}</BaseProvider>  
	</StyletronProvider>  
);

Once you've created your wrapper code, you can save this to your existing components folder, or store in the interplay folder in your repo.

2. Add the wrapper component to your index file

For Interplay to be able to run your wrapper component, it needs to be included in the components build created by the CLI.

To do this, add your wrapper to the index file exporting your components:

//index.js  
export { ThemeWrapper } from "./components/ThemeWrapper.js"

3. Configure the wrapper component in interplay.json

Next we tell Interplay which of your components to use as the wrapper. To do this you add a setting to interplay.json as outlined above for existing wrapper components.

//interplay.config.js 
"wrapperComponent": "your-package-name/ThemeWrapper"

4. Re-run the CLI

Once the wrapper is added to the index, the CLI will then pick it up on the next import run, bundling it with the other components as usual.

If you are using a custom build process you will need to re-build your index after this wrapper component has been added, and then run the CLI.