6.0.0 • Published 1 year ago

@arcteryx/components-universal v6.0.0

Weekly downloads
315
License
ISC
Repository
bitbucket
Last release
1 year ago

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

1 year ago

5.6.2

1 year ago

5.6.1-test.0

1 year ago

5.6.1

1 year ago

5.6.1-alpha.0

1 year ago

5.6.0

1 year ago

5.5.0

1 year ago

5.4.1

1 year ago

5.4.0

1 year ago

5.4.0-gamma.0

1 year ago

5.3.0

1 year ago

5.3.0-ts2.0

1 year ago

5.3.0-test.0

1 year ago

5.3.0-ts.0

1 year ago

5.3.0-alpha.0

1 year ago

5.2.1

1 year ago

5.2.1-alpha.0

1 year ago

5.2.0

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.0.0

2 years ago

2.7.1

2 years ago

4.1.2-alpha.0

2 years ago

4.1.4

2 years ago

4.3.1

2 years ago

4.2.2

2 years ago

4.1.3

2 years ago

4.1.5

2 years ago

4.1.0

2 years ago

4.0.1

2 years ago

4.0.0

2 years ago

4.3.0

2 years ago

4.2.1

2 years ago

4.1.2

2 years ago

4.2.0

2 years ago

4.1.1

2 years ago

2.7.0

2 years ago

2.5.0

2 years ago

2.6.1

2 years ago

2.5.2

2 years ago

2.4.3

2 years ago

2.6.0

2 years ago

2.5.1

2 years ago

2.4.2

2 years ago

2.6.3

2 years ago

2.6.2

2 years ago

2.4.1

2 years ago

2.4.0

3 years ago

2.3.0

3 years ago

2.2.0

3 years ago

2.1.0

3 years ago

2.0.0

4 years ago

1.2.1

4 years ago

1.2.0

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago