Header

Shared Header component

Props

Prop	Type	Description
fullStoryOrg	string	FullStory Org this is a short string provided by FullStory, required to initialize
isImpersonating	boolean	Whether or not the currently logged in user is being impersonated, can be determined by <jwt>.imp
onStopImpersonation	function	Use this function to make the appropriate a DELETE request to `/sso/impersonation` with the current jwt, upon completion clear the current app session and refresh
routerPath	string	Current active pathname per the router being used
routerPush	(string) => void	A function that pushes a route to the browser history
routerRoutes	string	A list of routes that should use `routerPush` rather than a direct anchor tag
referrerUrl	string	Catalog referrer url
variant	'normal' \| 'slim'	The varinat type is used to change the header view
logoutUrl	string	An optional logout URL that can be used to override the /logout route.

Examples

With React Router

import { useHistory } from 'react-router-dom';

const App = () => {
  const history = useHistory();

  return (
      <ApolloProvider client={apolloClient}>
        <ThemeProvider>
          <Header
            isImpersonating={!!tokenInfo.imp}
            onStopImpersonation={() =>
              fetch('/sso/impersonation', { method: 'DELETE' }).then(clearSession)
            }
            routerPath={history.location.pathname}
            routerPush={history.push}
            routerRoutes={['/one-to-ones']}
            referrerUrl="https://www.culturecloud.com"
          />
          {/* The rest of your page */}
        </ThemeProvider>
      </ApolloProvider>
  );
};

With Next Router

import { useRouter } from 'next/router';

const App = () => {
  const router = useRouter();

  return (
    <ApolloProvider client={apolloClient}>
      <ThemeProvider>
        <Header
          isImpersonating={!!tokenInfo.imp}
          onStopImpersonation={() =>
            fetch('/sso/impersonation', { method: 'DELETE' }).then(clearSession)
          }
          routerPath={router.pathname}
          routerPush={router.push}
          routerRoutes={['/', '/myteam', '/profile', '/settings']}
          referrerUrl="https://www.culturecloud.com"
        />
        {/* The rest of your page */}
      </ThemeProvider>
    </ApolloProvider>
  );
};

*Note the code below is only for display purposes on the docs page

() => {
  const [domNode, setDomNode] = React.useState(null);
  const [routerPath, setRouterPath] = React.useState('/');
  const featureFlagClient = React.useMemo(
    () => new LaunchDarklyClient(LAUNCHDARKLY_CLIENT_ID),
    [],
  );

  React.useEffect(() => {
    const div = document.createElement('div');
    div.id = 'portal';
    div.style.position = 'sticky';
    div.style.top = '0px';
    div.style.zIndex = 1000;
    document.body.prepend(div);
    setDomNode(div);
    return () => {
      div.remove();
    };
  }, []);

  if (domNode) {
    return ReactDOM.createPortal(
      <FeatureFlagProvider client={featureFlagClient}>
        <Header
          fullStoryOrg="TEST"
          isImpersonating={true}
          onStopImpersonation={() => console.log('stop impersonating')}
          routerPath={routerPath}
          routerPush={setRouterPath}
          routerRoutes={[
            '/',
            '/admin',
            '/catalog',
            '/initiatives',
            '/logout',
            '/myteam',
            '/notifications',
            '/one-to-ones',
            '/profile',
            '/settings',
            '/wellbeing',
            '/yearbook',
            '/anniversaries',
          ]}
          referrerUrl="https://www.octanner.app"
          variant="normal"
        />
      </FeatureFlagProvider>,
      domNode,
    );
  }
  return null;
};