Wrapper Component

UXPin Merge has an option to accept a Wrapper Component. A Wrapper Component is typically a HOC React.js component and can be used in several situations:

Passing a theme provider
Importing a common style file
Embedding font files stored in external services (Google Fonts, Adobe Fonts, etc.)

A Wrapper Component can be stored anywhere in the repository but you have to refer to its location in UXPin Config file. Example:


module.exports = {
    components: {
        categories: [
            {
                name: "First Category",
                include: [
                    "src/components/FirstComponent/FirstComponent.js",
                    "src/components/SecondComponent/SecondComponent.js"
                ]
            }
        ],
        wrapper: 'src/Wrapper/UXPinWrapper.js',
        webpackConfig: 'webpack.config.js',
    },
    name: "Name of your Library"
}

Basic Wrapper Component

The most basic Wrapper Component is a HOC React.js component that returns prop children. Example:

import React from "react";
 
export default function UXPinWrapper({ children }) {
  return children;
}

Passing a Theme Provider

Wrapper Component can be used to implement a theme provider. As a result, theme styles are going to be attached to every component rendered in UXPin. Example:

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
 
const theme = createMuiTheme({
  palette: {
    primary: { main: #006CFF },
    secondary: { main: #444444]},
  },
  typography: { useNextVariants: true },
});
 
export default function UXPinWrapper({ children }) {
 
  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
}

Importing a Common Style File

A Wrapper Component can also be used to import a common style file. Webpack will capture any import in the wrapper and add it (after compilation) to the JS package sent to UXPin. Example:

import React from "react";
import '../../styles/sass/common.scss';
 
export default function UXPinWrapper({ children }) {
  return children;
}

Embedding Font Files

This solution will likely be discontinued in the future. Merge prefers direct imports of all the files handled with Webpack.

A Wrapper Component can be used to attach link elements to the head of the html of your project. This can be useful, for example, to embed font files stored in cloud services such as Google Fonts or Adobe Fonts. Example:

import React from 'react';
 
export default function UXPinWrapper({ children }) {
    let icons = document.createElement('link');
    icons.setAttribute('href', 'https://fonts.googleapis.com/icon?family=Material+Icons');
    icons.setAttribute('rel', 'stylesheet');
    document.head.appendChild(icons);
   
    let roboto = document.createElement('link');
    roboto.setAttribute('href', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500');
    roboto.setAttribute('rel', 'stylesheet');
    document.head.appendChild(roboto);
 
    return children;
  }