3.0.1 • Published 1 year ago

@jouwomgeving/ui-popover v3.0.1

Weekly downloads
14
License
UNLICENSED
Repository
bitbucket
Last release
1 year ago

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

3.0.1

1 year ago

3.0.0

1 year ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.2.15

5 years ago

1.2.14

6 years ago

1.2.13

7 years ago

1.2.12

7 years ago

1.2.11

7 years ago

1.2.10

7 years ago

1.2.9

7 years ago

1.2.8

7 years ago

1.2.7

7 years ago

1.2.6

7 years ago

1.2.5

7 years ago

1.2.4

7 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

8 years ago

1.2.0

8 years ago

1.1.3

8 years ago

1.1.2

8 years ago

1.1.1

8 years ago

1.1.0

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.0.3-beta

9 years ago