@jouwomgeving/ui-popover

Dictator package JO ui popover

Stats

StarsIssuesVersionUpdatedCreatedSize
@jouwomgeving/ui-popover
1.2.15a year ago5 years agoMinified + gzip package size for @jouwomgeving/ui-popover in KB

Readme

@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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.