react-debounce-decorator

Injects hide and show props into a wrapped component. Currently being used in Guild Wars 2 Armory for tooltip debouncing.

Installation

npm install react-debounce-decorator

Usage

// If using flow, grab the injected props type.
import type { InjectedProps } from 'react-debounce-decorator';

import debounceDecorator from 'react-debounce-decorator';

debounceDecorator(150)(
  class View extends Component {
    props: InjectedProps;

    state: {
      message: string,
    } = { message: 'is anyone there?' };

    hello = () => {
      this.props.show(() => this.setState({
        message: 'hello!',
      }));
    };

    goodbye = () => {
      this.props.hide(() => this.setState({
        message: 'goodbye...',
      }));
    };

    render () {
      return (
        <div onMouseEnter={this.hello} onMouseLeave={this.goodbye}>
          {this.state.message}
        </div>
      );
    }
  }
)

debounceDecorator(wait: number): (Component) => Component(hide, show)

Returns a wrapped component that has injected props show and hide.

show(callback: Function): Function

Immediately calls callback when called.

hide(callback: Function): Function

Calls callback after the debounce duration has expired.

React Story Book

To run the component in various modes, run the following command then go to http://localhost:6006/.

npm start

Testing

npm test