React component to temporary show some components/elements.
- 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.
Installation ↑
npm install tempshow --save
Usage ↑
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 ↑
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 | 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. |
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 ↑
In lieu of a formal styleguide, take care to maintain the existing coding style. Add tests for any new functionality.
License ↑
Copyright (c) 2019-2020 Denis Sikuler
Licensed under the MIT license.