tempshow

    1.1.0 • Public • Published

    TempShow

    React component to temporary show some components/elements.

    NPM version

    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

    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.

    Install

    npm i tempshow

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    160 kB

    Total Files

    20

    Last publish

    Collaborators

    • gamtiq