react-appear-on-scroll v1.2.0

react-appear-on-scroll

Minimalistic package providing containers which appears when scrolled into view

Install

npm install --save react-appear-on-scroll

Example

Examples can be seen here.

Requirements

If you wrap a React Class Component or Functional Component with the <AppearingContainer/> you have to pass an inputRef prop to it's child (See example below)

Usage

import React, { Component } from 'react'
import 'react-appear-on-scroll/dist/index.css'

import {
  AppearingContainer,
  AppearSequentialContainer
} from 'react-appear-on-scroll'
import 'react-appear-on-scroll/dist/index.css'

// Wrapping a regular element
class Example extends Component {
  render() {
    return (
      <AppearingContainer
        animationType='fromLeft'
        transitionType='bouncy'
        fading
        stayVisible
      >
        <div style={{ width: '200px', height: '150px' }}>
          <p>This container will appear once it's entirely in the viewport</p>
        </div>
      </AppearingContainer>
    )
  }
}

//Wrapping a React Functional Component
const TestComponent = ({ inputRef }) => {
  return (
    <div ref={inputRef}>
      <p>Hello!</p>
    </div>
  )
}

class Example extends Component {
  render() {
    return (
      <AppearingContainer
        animationType='fromLeft'
        transitionType='bouncy'
        fading
        stayVisible
      >
        <TestComponent />
      </AppearingContainer>
    )
  }
}

// Using the AppearSequentialContainer
class Example2 extends Component {
  render() {
    return (
      <AppearSequentialContainer>
        <AppearingContainer
          animationType='scale'
          transitionType='bouncy'
          fading
          stayVisible
        >
          <div style={{ width: '200px', height: '150px' }}>
            <p>This container will appear first</p>
          </div>
        </AppearingContainer>
        <AppearingContainer
          animationType='scale'
          transitionType='bouncy'
          fading
          stayVisible
        >
          <div style={{ width: '200px', height: '150px' }}>
            <p>This container will appear with a 200ms delay</p>
          </div>
        </AppearingContainer>
        <AppearingContainer
          animationType='scale'
          transitionType='bouncy'
          fading
          stayVisible
        >
          <div style={{ width: '200px', height: '150px' }}>
            <p>This container will appear with a 400ms delay</p>
          </div>
        </AppearingContainer>
      </AppearSequentialContainer>
    )
  }
}

Props

AppearingContainer

AppearSequentialContainer

License

MIT © hugobergqvist