@arcteryx/components-universal
v6.0.0
Published
Provide market and env aware components for your FDP page templates.
Downloads
232
Readme
@arcteryx/components-universal
This package provides context aware components that can be used across our system of React apps.
Dependencies
@arcteryx/components-contexts
UIFooter and UIHeader
These components bootstrap the ui-components
Header/Footer custom built webcomponents. They're market
and env
aware.
UIHeader
Props:
env
- default:production
loadScript
- default:true
- By default load theui-components
scripts utilizing theUIComponentsScript
components (see below)fdp
- default:true
- Passed through to the web component. Recommended to betrue
UIFooter
Props:
uiBaseUrl
- required. Value can behttps://ui-components.arcteryx.com
|https://ui-components-staging.arcteryx.com
|https://ui-components-dev.arcteryx.com
env
- required. Value can be:production
|preprod
|stage
|qa
loadScript
- default:true
- By default load theui-components
scripts utilizing theUIComponentsScript
components (see below)
Usage
This pulls in the outdoor
Header/Footer because of the SiteContext
. It uses production
Header/Footer by default,
but you can specify an env
property to align it with your deployment environment.
import { UIHeader, UIFooter } from "@arcteryx/components-universal"
import { SiteContextProvider } from "@arcteryx/components-contexts"
// env can be: production | preprod | stage | qa
// `UIHeader` defaults to using `production` if the `env` prop is not set.
const env = process.env.DEPLOY_ENV
const MyApp = () => (
<SiteContextProvider market="outdoor" country="ca" language="en">
<UIHeader env={ env } />
<UIFooter />
</SiteContextProvider>
)
UIComponentsScript
This component is used by UIHeader
by default and it will load up ui-components
web components script,
which ultimately implements <arcteryx-outdoor-header>
, etc.
Props:
uiBaseUrl
- required. Value can behttps://ui-components.arcteryx.com
|https://ui-components-staging.arcteryx.com
|https://ui-components-dev.arcteryx.com
env
- required. Value can be:production
|preprod
|stage
|qa
async
- default:true
injectInHead
- default:true
WrapComponent
- default:null
(See below regardingNextJS
) If set,injectInHead
becomes implicitlyfalse
Usage
import { UIComponentsScript, UIHeader, UIFooter, COOKIE_SCRIPT_PREFIX_KEY } from "@arcteryx/components-universal"
import { SiteContextProvider } from "@arcteryx/components-contexts"
const env = process.env.DEPLOY_ENV;
const uiBaseUrl = process.env.UI_BASE_URL;
const scriptPrefix = cookies.get(COOKIE_SCRIPT_PREFIX_KEY);
const MyApp = () => (
<SiteContextProvider market="outdoor" country="ca" language="en">
<UIComponentsScript uiBaseUrl={uiBaseUrl} env={ env } scriptPrefix={scriptPrefix} />
<UIHeader loadScript={ false } />
<UIFooter />
</SiteContextProvider>
)
TagManagerScript
This component will load up the Adobe Launch tag manager scripts based on market
and env
.
Props:
env
- required. Value can be:production
|preprod
|stage
|qa
async
- default:true
injectInHead
- default:true
WrapComponent
- default:null
(See below regardingNextJS
)
Usage
import { TagManagerScript } from "@arcteryx/components-universal"
import { SiteContextProvider } from "@arcteryx/components-contexts"
const env = process.env.DEPLOY_ENV
const MyApp = () => (
<SiteContextProvider market="outdoor" country="ca" language="en">
<TagManagerScript env={ env } />
</SiteContextProvider>
)
NextJS Apps
NextJS
provides the ability to do a server-side-render (SSR) and it exposes a <Head>
component that wraps tags like <script>
and <link>
.
The benefit is that you can put the <Head>
component anywhere and it will place its children into document.head
. However, the problem is
that you cannot use other React components as children. So this is invalid: <Head><TagManagerScript /></Head>
. To get around this, the <*Script>
components expose a WrapComponent
prop.
Usage
import Head from "next/head";
import { TagManagerScript } from "@arcteryx/components-universal"
import { SiteContextProvider } from "@arcteryx/components-contexts"
const env = process.env.DEPLOY_ENV
const MyApp = () => (
<SiteContextProvider market="outdoor" country="ca" language="en">
<TagManagerScript env={ env } WrapComponent={ Head } />
</SiteContextProvider>
)