README

React Info Banner

@volvo-cars/react-info-banner

The package exposes two primary components; <InfoBanner/> and <InfoBannerWithCTA/>, which enable you to quickly add design-compliant Information or Promotional banners.

Installation

💡 This package includes Typescript definitions

InfoBanner

Renders an InfoBanner wrapper around the passed children.

<View>
  <InfoBanner>Info Message</InfoBanner>
</View>

The ref is forwarded to the root element.

Name	Description	Type	Default Value
`children`	JSX element to be wrapped	`ReactNode`	`undefined`
`offsetY`	`top` offset. Use to account for any existing fixed/sticky elements	`number`	`0`
`sticky`	Whether element should be `sticky` or `static`	`boolean`	`false`
`zIndex`	Use to override zIndex if conflicts with existing elements occur	`number`	`10`
`onDismiss`	Optional. If provided, renders a close icon wrapped in a `Click` handler	`func`	`undefined`

InfoLink

Additionally, InfoLink is also exported so that previous generation InfoBanner can be maintained;

<View>
  <InfoBanner>
    Info message <InfoLink href="#">Info link</InfoLink>
  </InfoBanner>
</View>

InfoBannerWithCTA

Renders an InfoBanner with a message and CTA.

<View>
  <InfoBannerWithCTA href="#" linkText="Link Text">
    Info Message
  </InfoBannerWithCTA>
</View>

The ref is forwarded to the root element.

Name	Description	Type	Default Value
`href`	Optional. If provided, wraps the `children` in a `a` element OR	`string`	`undefined`
`onClick`	Optional. If provided, wraps the `children` in a `button` element	`func`	`undefined`
`children`	JSX element to be wrapped	`ReactNode`	`undefined`
`offsetY`	`top` offset. Use to account for any existing fixed/sticky elements	`number`	`0`
`sticky`	Whether element should be `sticky` or `static`	`boolean`	`false`
`zIndex`	Use to override zIndex if conflicts with existing elements occur	`number`	`10`
`onDismiss`	Optional. If provided, renders a close icon wrapped in a `Click` handler	`func`	`undefined`

Anchor or button default attributes are also available.

useDismiss

Controls the dismissal and visibility state of an InfoBanner.

By default stores the dismissal state in React state. If given the persistToCookie option, it will persist the dismissal state across page loads in a session cookie. You may pass a function returning a boolean, for example persistToCookie={checkFunctionalCookieConsent}.

If a key is given, the dismissal will be valid globally on the entire domain under that key. This is useful if you have multiple pages showing the same InfoBanner or multiple dismissable InfoBanners on the same page. Use a globally unique key, prefixed with your application name. If no key is given the dismissal will be valid for any banner on the same exact path.

const DismissableInfoBanner = ({ children }) => {
  const { dismiss, visible } = useDismiss();
  return visible ? (
    <InfoBanner onDismiss={dismiss}>{children}</InfoBanner>
  ) : (
    'Dismissed'
  );
};

render(<DismissableInfoBanner>Info message</DismissableInfoBanner>);

Name	Description	Type	Default Value
`persistToCookie`	Enable persisting dismissal state in cookie.	`boolean` or `() => boolean`	`false`
`key`	Unique key for dismissal state in cookie.	`string`	`undefined`

Examples

Further example implementations, including Static, Sticky and Sticky with offset can be found in the Storybook.

Usage no npm install needed!