{"data":{"prismicDocsCategory":{"data":{"pages":[{"page":{"uid":"what-is-uxpin-merge","document":[{"data":{"title":{"text":"What is UXPin Merge?"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"using-react.js-components","document":[{"data":{"title":{"text":"Using React.js Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"creating-a-library","document":[{"data":{"title":{"text":"Creating a Library"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ai-assisted-merge-integration","document":[{"data":{"title":{"text":"AI-Assisted Merge Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"start-with-a-boilerplate-repo","document":[{"data":{"title":{"text":"Start with a Boilerplate Repo"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"integrating-your-own-components","document":[{"data":{"title":{"text":"Integrating Your Own Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"config-file","document":[{"data":{"title":{"text":"Config File"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"webpack-configuration","document":[{"data":{"title":{"text":"Webpack Configuration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"wrapper-component","document":[{"data":{"title":{"text":"Wrapper Component"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"adjusting-components","document":[{"data":{"title":{"text":"Adjusting Components"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"configuring-the-properties-panel","document":[{"data":{"title":{"text":"Configuring the Properties Panel"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"authoring-and-managing-jsx-presets","document":[{"data":{"title":{"text":"Authoring and Managing JSX Presets"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"cli-tool","document":[{"data":{"title":{"text":"CLI Tool"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"ci-servers","document":[{"data":{"title":{"text":"Connecting code to UXPin (CI & push)"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"version-control","document":[{"data":{"title":{"text":"Version Control"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"patterns","document":[{"data":{"title":{"text":"Patterns"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"tailwind-css-integration","document":[{"data":{"title":{"text":"Tailwind CSS Integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-design-system-documentation","document":[{"data":{"title":{"text":"Merge Design System Documentation"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-component-manager","document":[{"data":{"title":{"text":"Merge Component Manager"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"storybook-integration","document":[{"data":{"title":{"text":"Storybook integration"},"visible_in_table_of_content":"true"}}]}},{"page":{"uid":"merge-faq","document":[{"data":{"title":{"text":"Frequently Asked Questions"},"visible_in_table_of_content":"true"}}]}}]}},"prismicDocsPage":{"data":{"title":{"text":"Wrapper Component"},"isVisibleForRobots":"true","body":[{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<p>UXPin Merge has an option to accept a Wrapper Component. A Wrapper Component is typically a <a target=\"_blank\" rel=\"noopener\" href=\"https://reactjs.org/docs/higher-order-components.html\">HOC React.js</a> component and can be used in several situations:</p><ul><li>Passing a `theme provider`</li><li>Importing a common style file</li><li>Embedding font files stored in external services (Google Fonts, Adobe Fonts, etc.)</li></ul><p>A Wrapper Component can be stored anywhere in the repository but you have to refer to its location in UXPin Config file. Example:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"\nmodule.exports = {\n    components: {\n        categories: [\n            {\n                name: \"First Category\",\n                include: [\n                    \"src/components/FirstComponent/FirstComponent.js\",\n                    \"src/components/SecondComponent/SecondComponent.js\"\n                ]\n            }\n        ],\n        wrapper: 'src/Wrapper/UXPinWrapper.js',\n        webpackConfig: 'webpack.config.js',\n    },\n    name: \"Name of your Library\"\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h4>Basic Wrapper Component</h4><p>The most basic Wrapper Component is a HOC React.js component that returns prop children. Example:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from \"react\";\n \nexport default function UXPinWrapper({ children }) {\n  return children;\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Passing a Theme Provider</h3><p>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:<br /></p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\nimport { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';\n \nconst theme = createMuiTheme({\n  palette: {\n    primary: { main: #006CFF },\n    secondary: { main: #444444]},\n  },\n  typography: { useNextVariants: true },\n});\n \nexport default function UXPinWrapper({ children }) {\n \n  return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Importing a Common Style File</h3><p>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:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from \"react\";\nimport '../../styles/sass/common.scss';\n \nexport default function UXPinWrapper({ children }) {\n  return children;\n}"}]},"language":"JavaScript"}},{"__typename":"PrismicDocsPageBodyContent","slice_type":"content","primary":{"content_title":{"text":null},"content":{"html":"<h3>Embedding Font Files</h3><p>This solution will likely be discontinued in the future. Merge prefers direct imports of all the files handled with Webpack.</p><p>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:</p>"}}},{"__typename":"PrismicDocsPageBodyCode","slice_type":"code","primary":{"code":{"raw":[{"text":"import React from 'react';\n \nexport default function UXPinWrapper({ children }) {\n    let icons = document.createElement('link');\n    icons.setAttribute('href', 'https://fonts.googleapis.com/icon?family=Material+Icons');\n    icons.setAttribute('rel', 'stylesheet');\n    document.head.appendChild(icons);\n   \n    let roboto = document.createElement('link');\n    roboto.setAttribute('href', 'https://fonts.googleapis.com/css?family=Roboto:300,400,500');\n    roboto.setAttribute('rel', 'stylesheet');\n    document.head.appendChild(roboto);\n \n    return children;\n  }"}]},"language":"JavaScript"}}]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"categoryUid":"merge","pageUid":"wrapper-component","meta_description":"UXPin's merge Docs, wrapper component for new and advanced users","meta_image":"https://images.prismic.io/uxpincommunity/fa3875f8df8606e6405ba46165becc1ea6ed3d34.png?auto=compress,format","meta_title":"Wrapper Component | Merge","page_title":"Wrapper Component | Merge"}}