gamtiq / tempshow

React component to temporary show some components/elements

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.