1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121# TempShow <a name="start"></a>
React component to temporary show some components/elements.
[](http://badge.fury.io/js/tempshow)
### Features
* Control which events should trigger showing or hiding.
* Set timeout for automatic hiding (`autoHide` property).
* Specify a function to be called when component is shown (`onShow` property) or hidden (`onHide` property).
* Control component's visibility by `visible` property.
* Use different CSS classes and styles when component is visible and hidden.
## Table of contents
* [Installation](#install)
* [Usage](#usage)
* [API](#api)
* [Contributing](#contributing)
* [License](#license)
## Installation <a name="install"></a> [↑](#start)
npm install tempshow --save
## Usage <a name="usage"></a> [↑](#start)
```js
import TempShow from 'tempshow';
// ...
export class Foo extends React.Component {
constructor(props) {
super(props);
this.handleVisibleChange = this.handleVisibleChange.bind(this);
}
// ...
/**
* Handle component's visibility change.
*
* @param {boolean} visible
* `true`, when component became visible, `false`, when component became invisible.
*/
handleVisibleChange(visible) {
// ...
}
render() {
// ...
return (
<TempShow
className="overlay"
showClassName="opaque"
hideClassName="transparent"
autoHide={10}
onShow={this.handleVisibleChange}
onHide={this.handleVisibleChange}
visible={boolValueToControlVisibility}
showOnMouseOver={boolValueToControlShowOnMouseOver}
hideOnMouseLeave={true}
toggleVisibleOnClick={false}
>
<div className="content">
Some content here.
</div>
</TempShow>
);
}
}
```
## API <a name="api"></a> [↑](#start)
### Props
| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `autoHide` | number | `5` | Number of seconds after which component should be hidden automatically. When zero or negative value is specified auto hiding is not applied. |
| `children` | React node | | Component's children. |
| `className` | string | | A CSS class that should be set for component's root element. |
| `component` | React elementType | `div` | Component's root element type. |
| `componentProps` | object | | Any properties (except for `className` and `style`) that should be passed to component. |
| `componentRef` | function, object | | An optional ref callback to get reference to the root (top-most) element of the rendered component. Just like other refs, this will provide `null` when it unmounts. |
| `hideClassName` | string | | An additional CSS class that should be set for component's root element when component is hidden. |
| `hideForClick` | function | [hideForClick](#hideForClick) | Function that will be used to determine whether component should be hidden on a mouse click when value of `hideOnAnyClick` prop is `false`. The following arguments will be passed into function: event data (`SyntheticEvent`) and component's object. If function returns a true value, component will be hidden. |
| `hideOnAnyClick` | boolean | `false` | Whether component should be hidden on any mouse click. |
| `hideOnBlur` | boolean or function | `false` | Whether component should be hidden on `blur` event. A function can be specified to determine whether component should be hidden. The following arguments will be passed into function: event data (`SyntheticEvent`) and component's object. If the function returns a true value, component will be hidden. |
| `hideOnMouseLeave` | boolean | `false` | Whether component should be hidden when mouse leaves area of component's root DOM element. |
| `hideStyle` | object | | Styles that should be assigned for hidden component. |
| `postponeAutoHide` | boolean | `true` | Whether component's autohiding should be postponed when component props are changed. |
| `showClassName` | string | | An additional CSS class that should be set for component's root element when component is visible. |
| `showOnFocus` | boolean or function | `true` | Whether component should be shown on `focus` event. A function can be specified to determine whether component should be shown. The following arguments will be passed into function: event data (`SyntheticEvent`) and component's object. If the function returns a true value, component will be shown. |
| `showOnMouseOver` | boolean | `true` | Should component be shown on mouse over? |
| `showStyle` | object | | Styles that should be assigned for visible component. |
| `toggleVisibleOnClick` | boolean | `true` | Whether component visibility should be toggled on a mouse click. |
| `visible` | boolean | `false` | Should component be visible? Can be used to explicitly control component's visibility. |
| `onHide` | function | | Function that should be called on component hidding. |
| `onShow` | function | | Function that should be called on component show. |
### Methods
#### TempShow.hideForClick(eventData: SyntheticEvent): boolean <a name="hideForClick"></a>
Default function that is used to determine whether component should be hidden on a mouse click.
Return `true` when component's root DOM element is clicked.
## Contributing <a name="contributing"></a> [↑](#start)
In lieu of a formal styleguide, take care to maintain the existing coding style.
Add tests for any new functionality.
## License <a name="license"></a> [↑](#start)
Copyright (c) 2019-2020 Denis Sikuler
Licensed under the MIT license.