Skip to content
This repository has been archived by the owner on Oct 3, 2023. It is now read-only.
/ react-inview Public archive

React higher order component to check if element is within viewport.

Notifications You must be signed in to change notification settings

BausCode/react-inview

Repository files navigation

React Inview

Checks if component is inview. Built with vanilla javascript.

Currently in beta, please help contribute! Screenshot

Installation

Requires nodejs.

npm install react-inview-js

Options

  • showGuides: creates visual indicator of viewport size
  • offsetY: range 0 to 1. changes how large the viewport should be. Defaults to 0 which is the full size of browser.
  • fullElementInView: boolean(true/false) - false means just the top of the element is in view - good for large elements

Received Props

  • this.props.elementIsInView: True/false value based on if element is in view
  • this.props.elementHasBeenInView: True/false if the element has been in view

How To Use

import React, { Component } from 'react';
import ReactInview from 'react-inview-js';

class MyComponent extends Component {

 render () {
    const inView = this.props.elementIsInView;
    const elementHasBeenInView = this.props.elementHasBeenInView;

    // Change classname based on boolean
    const viewClassName = (inView)? 'is--inview-true' : 'is--inview-false';
    const elementHasBeenInView = (elementHasBeenInView)? 'Element has been seen' : 'Element has not been in view';

    return (
      <article className={viewClassName}>
        <h1>React InView -- { elementHasBeenInView }</h1>
      </article>
    );
  }
}

const InviewOptions = {offsetY: 0.8, showGuides: true, fullElementInView: false}

export default ReactInview(InviewOptions)(MyComponent);

Example

npm install && npm install react react-dom && npm start

About

React higher order component to check if element is within viewport.

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •