react-lifecycle-appear

1.1.2 • Public • Published

react-lifecycle-appear

A React HOC, adding lifecycle methods for handling a component enters or exits the viewport.

Add following lifecycle methods

  • didAppear: Called when a componnet enters the viewport
  • didAppearOnce: Same as didAppear but called only once
  • didDisappear: Called when a componnet exits the viewport
  • didDisappearOnce: Same as didDisappear but called only once

All lifecycle methods will receive a param when called: IntersectionObserverEntry

Tip: when react-lifecycle-appear needs to be combined with other decorators or higher-order-components, make sure that react-lifecycle-appear is the innermost (first applied) decorator, this will not affect other HOC behavior, such as MobX observer.

Installation

npm install react-lifecycle-appear --save

Usage

HOC params

import React, { Component } from 'react';
import withAppear from 'react-lifecycle-appear';
 
@withAppear({
  didAppear(ioe) {
    console.log('Appeared');
    this.setState({ appeared: true });
  }
 
  didAppearOnce(ioe) {
    console.log('Once Appeared');
    this.setState({ appeared: true });
  }
 
  didDisappear(ioe) {
    console.log('Disappeared');
    this.setState({ appeared: false });
  }
 
  didDisappearOnce(ioe) {
    console.log('Once Disappeared');
    this.setState({ appeared: false });
  }
})
class extends Component {
  state = {
    appeared: false
  }
 
  render() {
    const { appeared } = this.state;
 
    return (
      <div>{ appeared ? 'appeared' : 'disappeared' }</div>
    )
  }
}

Component methods

import React, { Component } from 'react';
import withAppear from 'react-lifecycle-appear';
 
@withAppear()
class extends Component {
  state = {
    appeared: false
  }
 
  didAppear(ioe) {
    console.log('Appeared');
    this.setState({ appeared: true });
  }
 
  didAppearOnce(ioe) {
    console.log('Once Appeared');
    this.setState({ appeared: true });
  }
 
  didDisappear(ioe) {
    console.log('Disappeared');
    this.setState({ appeared: false });
  }
 
  didDisappearOnce(ioe) {
    console.log('Once Disappeared');
    this.setState({ appeared: false });
  }
 
  render() {
    const { appeared } = this.state;
 
    return (
      <div>{ appeared ? 'appeared' : 'disappeared' }</div>
    )
  }
}

Component

import React, { Component } from 'react';
import { Appear } from 'react-lifecycle-appear';
 
class extends Component {
  state = {
    appeared: false
  }
 
  handleAppear = (ioe) => {
    console.log('Appeared');
    this.setState({ appeared: true });
  }
 
  handleAppearOnce = (ioe) => {
    console.log('Once Appeared');
    this.setState({ appeared: true });
  }
 
  handleDisappear = (ioe) => {
    console.log('Disappeared');
    this.setState({ appeared: false });
  }
 
  handleDisappearOnce = (ioe) => {
    console.log('Once Disappeared');
    this.setState({ appeared: false });
  }
 
  render() {
    const { appeared } = this.state;
 
    return (
      <Appear
        onAppear={this.handleAppear}
        onAppearOnce={this.handleAppearOnce}
        onDisappear={this.handleDisappear}
        onDisappearOnce={this.handleDisappearOnce}
      >
        <div>{ appeared ? 'appeared' : 'disappeared' }</div>
      </Appear>
    )
  }
}

Package Sidebar

Install

npm i react-lifecycle-appear

Weekly Downloads

1

Version

1.1.2

License

MIT

Unpacked Size

18.9 kB

Total Files

10

Last publish

Collaborators

  • broltes