React-scroll-delay-action NPM

react-delayed-scroll-action

A component that contains a callback with the delay seconds after which the callback is called.

Installation

yarn add react-delayed-scroll-action

Props

Prop	Description	Type
`delayTime`	Time (in ms) after which the `onEnd` callback will be called	`number`
`onStart?`	Once the element is visible on scroll event, the component timer starts to count until the specified `delayTime` is reached. The `onStart` callback is triggered right before the timer starts.	`(id: any) => any`
`onEnd?`	The `onEnd` callback is called after the `delayTime` is reached since element became visibile after scrolling. If the element is still visible after `delayTime` seconds since the last scroll, the `onEnd` callback will be called with passed in `id` (or non if not specified).	`(id: any) => any`
`id?`	Identifier for the component that will be passed to `onStart` and `onEnd` prop callbacks. This is helpful when you want attach delayed scroll events to collection of items to be able to update the states accordingly.	`any`
`callOnce?`	`false` by default. The callbacks (`onStart` and `onEnd`) will be called only once once the element is visible on scroll. If set to `true`, the callbacks will be triggered every time the element is visible on scrolling event.	`boolean`
`parentNode?`	`window` by default. The parent node relative to which element visibility should be calculated.	`any`

Usage

Attaching delayed actions, onStart and onEnd, after specified delayTime.

<div style={{ height: '40000px' }}>
  <h1 style={{ textAlign: 'center' }}>Scroll down!!!</h1>
  <div style={boxStyle}>
    <DelayedScrollAction
      onStart={() =>
        this.setState(() => {
          shouldCongratulate: false,
        })
      }}
      onEnd={() =>
        this.setState({
          shouldCongratulate: true,
        })
      }
      delayTime={delayTime}
      id="banner"
      callOnce={true}
    >
      <article>{boxText}</article>
        {shouldCongratulate && <p style={{ textAlign: 'center' }}>Congratulations!/p>}
    </DelayedScrollAction>
  </div>
</div>

Attaching delayed actions for each item in collection.

<div style={wrapper}>
  {items.map(({ id }) => (
    <DelayedScrollAction
      key={id}
      id={id}
      delayTime={3000}
      onEnd={id => {
        this.setState({
          currentTarget: id
        });
      }}
    >
      <article
        style={{
          ...articleStyle,
          background: id === currentTarget ? 'red' : 'white'
        }}
        key={id}
      >
        This article has ID #{id}.
      </article>
    </DelayedScrollAction>
  ))}
</div>