How to use bpk-scrim-utils - 2 common examples

import PropTypes from 'prop-types';
import React, { type Element } from 'react';
import { withScrim } from 'bpk-scrim-utils';
import { Portal, cssModules } from 'bpk-react-utils';

import STYLES from './BpkModal.scss';
import BpkModalDialog, {
  propTypes as modalDialogPropTypes,
  defaultProps as modalDialogDefaultProps,
  type Props as ModalDialogProps,
} from './BpkModalDialog';
import { modalOnClosePropType } from './customPropTypes';

const getClassName = cssModules(STYLES);
const ScrimBpkModalDialog = withScrim(BpkModalDialog);

// Please remove this type when `withScrim` is flow-typed
type ScrimProps = {
  isIphone: boolean,
  dialogRef: () => ?HTMLElement,
};

export type Props = {
  // The `withScrim` HOC satisfies some of the ModalDialogs required
  // props but it's not flow typed yet so this
  // diff will suffice for now.
  ...$Exact<$Diff>,
  isOpen: boolean,
  isIphone: boolean,
  closeOnScrimClick: boolean,
  closeOnEscPressed: boolean,

* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Portal, cssModules } from 'bpk-react-utils';
import { withScrim } from 'bpk-scrim-utils';

import BpkDrawerContent from './BpkDrawerContent';
import STYLES from './BpkDrawer.scss';

const getClassName = cssModules(STYLES);

const BpkScrimDrawerContent = withScrim(BpkDrawerContent);

class BpkDrawer extends Component {
  constructor() {
    super();

    this.state = {
      isDrawerShown: true,
    };
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.isOpen && nextProps.isOpen) {
      this.setState({ isDrawerShown: true });
    }
  }