bpk-component-bottom-sheet

bpk-component-bottom-sheet

Backpack bottom sheet component.

Installation

Check the main Readme for a complete installation guide.

Usage

import { Component } from 'react';
import BpkBottomSheet from '@skyscanner/backpack-web/bpk-component-bottom-sheet';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

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

    this.state = {
      isOpen: false,
    };
  }

  onOpen = () => {
    this.setState({
      isOpen: true,
    });
  };

  onClose = () => {
    this.setState({
      isOpen: false,
    });
  };

  render() {
    return (
      <div id="bottom-sheet-container">
        <div id="pagewrap">
          <BpkButton onClick={this.onOpen}>Open bottom sheet</BpkButton>
        </div>
        <BpkBottomSheet
          id="my-bottom-sheet"
          isOpen={this.state.isOpen}
          onClose={this.onClose}
          title="Bottom sheet title"
          closeLabel="Close bottom sheet"
          getApplicationElement={() => document.getElementById('pagewrap')}
          renderTarget={() => document.getElementById('bottom-sheet-container')}
        >
          This is a bottom sheet. You can put anything you want in here.
        </BpkBottomSheet>
      </div>
    );
  }
}

Ensure your body/children is accessible via Voice Over. You may need to specify the tabIndex of the elements.