@arcteryx/components-universal NPM

@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 the ui-components scripts utilizing the UIComponentsScript components (see below)
fdp - default: true - Passed through to the web component. Recommended to be true

UIFooter Props:

uiBaseUrl - required. Value can be https://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 the ui-components scripts utilizing the UIComponentsScript 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 be https://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 regarding NextJS) If set, injectInHead becomes implicitly false

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 regarding NextJS)

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>
)

@arcteryx/design-system

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago