@jouwomgeving/ui-popover v3.0.1

@jouwomgeving/ui-popover

Installation

$ npm install @jouwomgeving/ui-popover react react-dom

Usage

import React, { Component } from 'react';
import { PopOver } from '@jouwomgeving/ui-popover';

export default class Example extends Component {

  state = {
    open: false,
    trigger: null,
  };

  handleClick(event) {
    this.setState({
      open: !this.state.open,
      trigger: event.target,
    });
  }

  close() {
    this.setState({
      open: false,
    });
  }

  render() {
    return (
      <div>
        <button
          onClick={::this.handleClick}
        >Don't write 'click here' here!</button>
        <PopOver
          autoHide={::this.close}
          open={this.state.open}
        >
          <h1>Hello, world!</h1>
        </PopOver>
      </div>
    );
  }
}

props

[Function] autoHide

If set, it must provide a container method that manages the open prop.

Side effects:

• a click event firing on any ancestor node of the PopOver closes it
• tabbing is largely simulated according to default behaviour (cf. the strategy prop)

[Boolean] open

Sets the PopOver visibility. If false, its display value is none. (NB: ReactDOM.unstable_renderSubtreeIntoContainer cannot render null.)

[String] strategy

'toggle' (default)

• show/hide the PopOver on trigger click
• tabbing out of the PopOver or clicking outside of it sets the focus back on the trigger

'focus'

• show/hide the PopOver on focus/blur
• tabbing out of the PopOver forwards sets the focus on the next focusable sibling (if any) of the trigger
• tabbing out of the PopOver backwards sets the focus on the previous focusable sibling (if any) of the trigger

[String] orientation

Override dynamic orientation with one of the following values:

• top-center
• top-right
• top-left
• bottom-center
• bottom-right
• bottom-left

[Object] style

Mix custom style into the PopOver element's style prop.

[HTMLElement] trigger

A 'raw' DOM node that serves as position reference. Can be provided on demand with an event handler's event.target or initially with a ref.

[String|Array] width

[String]

If inherit, set the width property to the trigger element's width, otherwise to the value.

[Array]

Set the min-width property to the first value and the max-width property to the second.