Layer

Notes

Layer uses React's built in portal method to create a visual stacking layer in the DOM outside the React application. It creates a fixed position full screen element that would commonly be used for creating modal windows, dialogs, and overlays.

By default, it will append itself (and children) to the body element, but can optionally accept another element as the target.

Props

childrenany
The content that will appear in the Layer
isOpenbool[false]
Indicates whether the Layer should be rendered or not
targetElementcustom[IS_BROWSER ? document.body : undefined]
The DOM element to append the Layer to; defaults to the body element

class LayerExample extends React.Component {
  constructor() {
    this.toggleOpen = this.toggleOpen.bind(this);
    this.state = { isOpen: false };
    this.targetElement = window && window.document ? document.getElementById('layer-target') : null;
  }

  toggleOpen() {
    this.setState({ isOpen: !this.state.isOpen });
  }

  renderChildren() {
    return (
      <div className="height-100 flex flex-column justify-center items-center">
        <Mask isActive onClick={this.toggleOpen} />
        <div
          className="relative bg-white p5 flex items-center justify-center"
          style={{
            width: "80%",
            height: "200px",
            maxWidth: "500px",
            zIndex: 1
          }}
        >
          <Button onClick={this.toggleOpen}>Close me</Button>
        </div>
      </div>
    );
  }

  render() {
    const { isOpen } = this.state;
    return (
      <div>
        <p className='pb3'>
          Layer can be used for any type of overlay or modal window that needs
          to be able to stack above the rest of the application
        </p>

        <Button onClick={ this.toggleOpen }>Open layer</Button>

        <Layer
          isOpen={isOpen}
          targetElement={this.targetElement}
          style={{zIndex: '2'}}
          className='foo'
        >
          {this.renderChildren()}
        </Layer>
      </div>
    );
  }
}

render(<LayerExample />);

class LayerExample extends React.Component {
  constructor() {
    this.toggleOpen = this.toggleOpen.bind(this);
    this.state = { isOpen: false };
    this.targetElement = window && window.document ? document.getElementById('layer-target') : null;
  }

  toggleOpen() {
    this.setState({ isOpen: !this.state.isOpen });
  }

  renderChildren() {
    return (
      <div className="height-100 flex flex-column justify-center items-center">
        <Mask isActive onClick={this.toggleOpen} />
        <div
          className="relative bg-white p5 flex items-center justify-center"
          style={{
            width: "80%",
            height: "200px",
            maxWidth: "500px",
            zIndex: 1
          }}
        >
          <Button onClick={this.toggleOpen}>Close me</Button>
        </div>
      </div>
    );
  }

  render() {
    const { isOpen } = this.state;
    return (
      <div>
        <p className='pb3'>
          Layer can be used for any type of overlay or modal window that needs
          to be able to stack above the rest of the application
        </p>

        <Button onClick={ this.toggleOpen }>Open layer</Button>

        <Layer
          isOpen={isOpen}
          targetElement={this.targetElement}
          style={{zIndex: '2'}}
          className='foo'
        >
          {this.renderChildren()}
        </Layer>
      </div>
    );
  }
}

render(<LayerExample />);