Dictator package JO ui popover


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




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


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

export default class Example extends Component {

  state = {
    open: false,
    trigger: null,

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

  close() {
      open: false,

  render() {
    return (
        >Don't write 'click here' here!</button>
          <h1>Hello, world!</h1>


[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


  • 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


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


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.