Nonsense Placement Mandatory

    @jouwomgeving/ui-popover

    2.0.3 • Public • Published

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

    Keywords

    none

    Install

    npm i @jouwomgeving/ui-popover

    DownloadsWeekly Downloads

    419

    Version

    2.0.3

    License

    UNLICENSED

    Unpacked Size

    52.6 kB

    Total Files

    14

    Last publish

    Collaborators

    • gaaltink.avinty
    • marcelblijleven_avinty
    • ivanhulzen
    • dkainama
    • rvanleeuwen
    • heesink
    • hellobramkok
    • dbunskoek