bpk-scrim-utils-css

bpk-scrim-utils

Higher order component that adds a scrim behind components and manages scroll states

Installation

npm install bpk-scrim-utils --save-dev

import { withScrim } from 'bpk-scrim-utils';

const Box = props => (
  <div ref={props.dialogRef}>
    <BpkButton onClick={props.onClose}>Close</BpkButton>
    Hello
  </div>
);

const BoxWithScrim = withScrim(Box);

withScrim sends all props it receives down to the component, except getApplicationElement and padded. It also adds some props that are used for a11y and closing the modal:

• dialogRef should be set as the ref on the visible container on top of the scrim; it is used to set focus
• onClose should be set as the onClick action on a button or a link
• isIphone can be used to apply iPhone only styles or behaviour, as it has different scrolling behaviour

containerClassName can be used to apply styles to the full-screen container into which the enriched component is inserted (e.g. display: flex or display: grid)

Note: the pagewrap element id is a convention we use internally at Skyscanner. In most cases it should "just work".

Props

Property	PropType	Required	Default Value
onClose	func	true	See prop details
getApplicationElement	func	true	-
isIphone	bool	false	/iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '')
containerClassName	string	false	''
closeOnScrimClick	bool	false	true
dark	bool	false	false

Prop Details

onClose

This is required unless closeOnScrimClick is false.