@trend/focustrap NPM

Focus trap

A React component that traps focus.

This component is a wrapper for focus-trap and a manual fork of focus-trap-react tailored for trend-components needs.

Installation
Basic Usage
props

Installation

## Has peer dependency with react and react-dom
npm i react react-dom
npm i @trend/focustrap

Basic Usage

With a module bundler like webpack, use as you would anything else:

import React from 'react';
import FocusTrap from '@trend/focustrap';

class Demo extends React.Component {
  state = {
    activeTrap: false
  }

  mountTrap = () => {
    this.setState({ activeTrap: true });
  }

  unmountTrap = () => {
    this.setState({ activeTrap: false });
  }

  render() {
    const trap = this.state.activeTrap
      ? <FocusTrap
          focusTrapOptions={{
            onDeactivate: this.unmountTrap
          }}>
          <div style={{
            border: '1px solid rgba(0, 0, 0, 0.2',
            padding: '1rem'
          }}>
            <p>
              Here is a focus trap
              {' '}
              <a href="#">with</a>
              {' '}
              <a href="#">some</a>
              {' '}
              <a href="#">focusable</a>
              {' '}
              parts.
            </p>
            <p>
              <button onClick={this.unmountTrap}>
                deactivate trap
              </button>
            </p>
          </div>
        </FocusTrap>
      : false;

    return (
      <div className="tc-pal">
        <div className="tc-mbl">
          <button onClick={this.mountTrap}>toggle trap</button>
        </div>
        {trap}
      </div>
    );
  }
}