@arcteryx/components-universal

Provide market and env aware components for your FDP page templates.

Usage no npm install needed!

<script type="module">
  import arcteryxComponentsUniversal from 'https://cdn.skypack.dev/@arcteryx/components-universal';
</script>

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

  • none

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:

  • 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 } 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">
    <UIComponentsScript env={ env } />
    <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>
)