UXPin Merge에는 Wrapper 컴포넌트를 이용할 수 있는 옵션이 있습니다. Wrapper 컴포넌트는 일반적으로 HOC React.js 컴포넌트이며 여러 상황에서 사용할 수 있습니다.

• theme provider 전달하기
• 공통 스타일 파일 가져오기
• 외부 서비스 (Google Fonts, Adobe Fonts 등)에 저장된 글꼴 파일을 임베드하기

Wrapper 컴포넌트는 repo의 어느 곳에나 저장할 수 있지만 UXPin Config 파일에서 해당 위치를 참조해야 합니다. 예:

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"
}

기본적인 Wrapper 컴포넌트

가장 기본적인 Wrapper 컴포넌트는 prop children을 반환하는 HOC React.js 컴포넌트입니다. 예:

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

Theme provider 전달하기

Wrapper 컴포넌트는 theme provider를 구현하는 데 사용할 수 있습니다. 그 결과, UXPin으로 렌더링 되는 모든 컴퍼넌트에 theme styles가 첨부되게 됩니다. 예:

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>;
}

공통 스타일 파일 가져오기

Wrapper 컴포넌트는 공통 스타일 파일을 가져오는 데에도 사용할 수 있습니다. Webpack은 wrapper가 가져온 내용를 캡처하고 (컴파일 후) UXPin으로 전송되는 JS 패키지에 추가합니다. 예:

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

글꼴 파일 임베드하기

이 솔루션은 향후 폐지될 수 있습니다. Merge는 Webpack에서 처리되는 모든 파일을 직접 가지고 오는 것를 선호합니다.

Wrapper 컴포넌트를 사용하면 링크 요소를 프로젝트의 html head에 첨부 할 수 있습니다. 예를 들어 Google Fonts 및 Adobe Fonts와 같은 클라우드 서비스에 저장된 글꼴 파일을 포함하는 데 유용합니다. 예: