@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.
1 year ago
1 year ago
3 years ago
3 years ago
3 years ago
3 years ago
5 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago