React Info Banner🔗

@volvo-cars/react-info-banner

@volvo-cars/react-info-banner
@volvo-cars/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.

Info Message

The ref is forwarded to the root element.

Name
Description
Type
Default Value
childrenJSX element to be wrappedReactNodeundefined
offsetYtop offset. Use to account for any existing fixed/sticky elementsnumber0
stickyWhether element should be sticky or staticbooleanfalse
zIndexUse to override zIndex if conflicts with existing elements occurnumber10
onDismissOptional. If provided, renders a close icon wrapped in a Click handlerfuncundefined

InfoLink🔗

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

Info message Info link

InfoBannerWithCTA🔗

Renders an InfoBanner with a message and CTA.

The ref is forwarded to the root element.

Name
Description
Type
Default Value
hrefOptional. If provided, wraps the children in a a element ORstringundefined
onClickOptional. If provided, wraps the children in a button elementfuncundefined
childrenJSX element to be wrappedReactNodeundefined
offsetYtop offset. Use to account for any existing fixed/sticky elementsnumber0
stickyWhether element should be sticky or staticbooleanfalse
zIndexUse to override zIndex if conflicts with existing elements occurnumber10
onDismissOptional. If provided, renders a close icon wrapped in a Click handlerfuncundefined

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.

Info message
Name
Description
Type
Default Value
persistToCookieEnable persisting dismissal state in cookie.boolean or () => booleanfalse
keyUnique key for dismissal state in cookie.stringundefined

Examples🔗

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

2022 © Volvo Car Corporation