Package Exports

tempshow

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tempshow) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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.

JSPM

tempshow