react-inview

Add in/exit viewport event hook on react components

install

install with npm

npm install --save react-in-view

how to use

import React, { Component } from 'react'
import InView from 'react-in-view'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text: '',
      visible: false,
    }

    this.handleEnter = this.handleEnter.bind(this)
    this.handleLeave = this.handleLeave.bind(this)
  }
  handleEnter() {
    this.setState({
      text: '进来了',
      visible: true,
    })
  }
  handleLeave() {
    this.setState({
      text: '出去了',
      visible: false,
    })
  }
  render() {
    const { text, visible } = this.state
    const style = {
      position: 'fixed',
      top: 0,
      width: '100%',
      height: '40px',
      opacity: visible ? 1 : 0,
      lineHeight: '40px',
      color: '#fff',
      textAlign: 'center',
      transition: 'all 300ms ease-in-out',
      background: 'black'
    }
    const sectionStyle = {
      height: '200px',
      background: 'red',
      marginTop: '100px'
    }

    return (
      <div>
        <div style={{height: '1000px'}}></div>
        <div style={style}>顶部导航</div>
        <ReactInView onEnter={this.handleEnter} onLeave={this.handleLeave} thresholdY={0.5}>
          <div style={sectionStyle} className="in-view">
            {this.state.text}
          </div>
        </ReactInView>
        <div style={{height: '1000px'}}></div>
      </div>
    )
  }
}

#received props

属性名	描述信息	默认值	类型
onLeave	trigger when element leave viewport		Function
onEnter	trigger when element enter viewport		Function
thresholdX	set enter/leave threshold rate that relative to the element width.	0	Number
thresholdY	set enter/leave threshold rate that relative to the element height.	0	Number
offsetTop	set enter/leave threshold value that offset window top	0	Number
offsetBottom	set enter/leave threshold value that offset window bottom	0	Number
offsetRight	set enter/leave threshold value that offset window right	0	Number
offsetLeft	set enter/leave threshold value that offset window left	0	Number