react-lifecycle-appear

KO | EN

gitlite — search

#react #ai #typescript #go #rust #deep-learning #linux #nodejs #awesome #kubernetes #vue #ios #mcp #open-source

react-lifecycle-appear

(★ 10)

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

react-lifecycle-appear Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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
](https://developer.mozilla.org/en-US/docs/Web/API/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

```bash
npm install react-lifecycle-appear --save
```

## Usage
### HOC params

```javascript
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

```javascript
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
```javascript
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>
    )
  }
}
```

react-lifecycle-appear

react-lifecycle-appear Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-lifecycle-appear

react-lifecycle-appear Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README