1.3.0 • Published 6 years ago
react-inview-js v1.3.0
React Inview
Checks if component is inview. Built with vanilla javascript.
Currently in beta, please help contribute!
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
1.3.0
6 years ago
1.2.7
7 years ago
1.2.6
7 years ago
1.2.5
7 years ago
1.2.4
7 years ago
1.2.3
7 years ago
1.2.2
7 years ago
1.2.1
7 years ago
1.2.0
8 years ago
1.0.13
8 years ago
1.0.12
8 years ago
1.0.11
8 years ago
1.0.10
8 years ago
1.0.9
8 years ago
1.0.8
8 years ago
1.0.7
8 years ago
1.0.6
8 years ago
1.0.5
8 years ago
1.0.4
8 years ago
1.0.3
8 years ago
1.0.2
8 years ago
1.0.1
8 years ago
1.0.0
8 years ago