TempShow

React component to temporary show some components/elements.

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
• Usage
• API
• Contributing
• License

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 ↑

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

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.