Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
scrollmonitor-react
Advanced tools
scrollmonitor-react - npm Package Compare versions
Comparing version 2.0.2 to 2.0.3
@@ -82,2 +82,10 @@ 'use strict'; | ||
| _this2.lockWatcher = function () { | ||
| _this2.watcher.lock(); | ||
| }; | ||
| _this2.unlockWatcher = function () { | ||
| _this2.watcher.unlock(); | ||
| }; | ||
| _this2.state = { | ||
@@ -155,12 +163,2 @@ isInViewport: false, | ||
| }, { | ||
| key: 'lockWatcher', | ||
| value: function lockWatcher() { | ||
| this.watcher.lock(); | ||
| } | ||
| }, { | ||
| key: 'unlockWatcher', | ||
| value: function unlockWatcher() { | ||
| this.watcher.unlock(); | ||
| } | ||
| }, { | ||
| key: 'render', | ||
@@ -167,0 +165,0 @@ value: function render() { |
@@ -96,7 +96,7 @@ import React from 'react'; | ||
| lockWatcher () { | ||
| lockWatcher = () => { | ||
| this.watcher.lock(); | ||
| } | ||
| unlockWatcher () { | ||
| unlockWatcher = () => { | ||
| this.watcher.unlock(); | ||
@@ -103,0 +103,0 @@ } |
| { | ||
| "name": "scrollmonitor-react", | ||
| "version": "2.0.2", | ||
| "version": "2.0.3", | ||
| "description": "React HOC for the scrollMonitor", | ||
@@ -36,3 +36,4 @@ "main": "dist/index.js", | ||
| "babel-preset-es2015": "^6.3.13", | ||
| "babel-preset-react": "^6.3.13" | ||
| "babel-preset-react": "^6.3.13", | ||
| "babel-preset-stage-0": "^6.16.0" | ||
| }, | ||
@@ -42,5 +43,6 @@ "babel": { | ||
| "es2015", | ||
| "react" | ||
| "react", | ||
| "stage-0" | ||
| ] | ||
| } | ||
| } |
115
README.md
| # ScrollMonitor-React | ||
| This is a React component that provides an API to the [scrollMonitor](https://github.com/stutrek/scrollMonitor). | ||
| This is a React component that provides an API to the [scrollMonitor](https://github.com/stutrek/scrollMonitor). It lets you create both watchers and scroll containers. | ||
| It can call methods when a watched element enters or exits the viewport and adds `isInViewport`, `isAboveViewport`, `isBelowViewport`, and `isFullyInViewport` to `this.props`. | ||
| It adds all the boolean properties from a watcher to `this.props` and takes all the method properties as properties. | ||
| ## Usage | ||
| Scrollmonitor-react is two higher order components. They're functions that your pass an original component and receive a new component that adds functionality to the original. | ||
| Include it in your project | ||
| ## Basic Usage | ||
| ``` | ||
| npm install scrollmonitor-react | ||
| ``` | ||
| Then use it to wrap your own component. | ||
| ### Knowing when you're in the viewport | ||
| ```javascript | ||
| import React from 'react'; | ||
| import { Watch, ScrollContainer } from 'scrollmonitor-react'; | ||
| import { Watch } from 'scrollmonitor-react'; | ||
| export default Watch(class MyComponent extends React.Component { | ||
| // This part is optional, see Locking on the scrollMonitor's readme. | ||
| componentWillReceiveProps (props) { | ||
| if (props.watcherShouldLock) { | ||
| this.props.lockWatcher(); | ||
| } else { | ||
| this.props.unlockWatcher(); | ||
| } | ||
| } | ||
| render () { | ||
@@ -40,8 +26,12 @@ var text; | ||
| return (<span>{text}</span>); | ||
| return (<span> | ||
| {text} | ||
| {this.props.children} | ||
| </span>); | ||
| } | ||
| }); | ||
| ``` | ||
| ### Doing something when a watched child enters or exits the viewport | ||
| You can also pass methods with the scrollMonitor event names as props to your component. | ||
| Provide methods with the scrollMonitor event names as props to your component. | ||
@@ -51,3 +41,3 @@ ```javascript | ||
| import MyComponent from './the/example/above'; | ||
| import MyWatchedComponent from './the/example/above'; | ||
@@ -61,3 +51,3 @@ export default MyParentComponent extends React.Component { | ||
| render () { | ||
| return (<MyComponent stateChange={this.receiveStateChange} />) | ||
| return (<MyWatchedComponent stateChange={this.receiveStateChange} />) | ||
| } | ||
@@ -67,25 +57,44 @@ } | ||
| If you have a scroll container, use the scroll container component. | ||
| ## API | ||
| ### `this.props` provided to your component | ||
| * `this.props.isInViewport` - true if any part of the element is visible, false if not. | ||
| * `this.props.isFullyInViewport` - true if the entire element is visible [1]. | ||
| * `this.props.isAboveViewport` - true if any part of the element is above the viewport. | ||
| * `this.props.isBelowViewport` - true if any part of the element is below the viewport. | ||
| * `this.props.lockWatcher()` - locks the watcher letting you move the element but watch the same place. See the scrollMonitor's documentation for more info. | ||
| * `this.props.unlockWatcher()` - unlocks the watcher. | ||
| _1. If the element is larger than the viewport `isFullyInViewport` is true when the element spans the entire viewport._ | ||
| ### Propeties you provide to the component | ||
| ```javascript | ||
| <MyWatchedComponent | ||
| stateChange={() => {}} // Called when any part of the state changes. | ||
| visibilityChange={() => {}} // when the element partially enters or fully exits the viewport. | ||
| enterViewport={() => {}} // when the element enters the viewport. | ||
| fullyEnterViewport={() => {}} // when the element is completely in the viewport [1]. | ||
| exitViewport={() => {}} // when the element completely leaves the viewport. | ||
| partiallyExitViewport={() => {}} // when the element goes from being fully in the viewport to only partially [2] | ||
| > | ||
| <h1>Child components are fine too.</h1> | ||
| </MyWatchedComponent> | ||
| ``` | ||
| _1. If the element is larger than the viewport `fullyEnterViewport` will be triggered when the element spans the entire viewport._ | ||
| _2. If the element is larger than the viewport `partiallyExitViewport` will be triggered when the element no longer spans the entire viewport._ | ||
| ## Scroll Containers | ||
| The `ScrollContainer` HOC lets you create scrollMonitor Scroll Containers. It provides a scroll container on `this.props` that it must pass to its children. | ||
| ```javascript | ||
| import React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import { ScrollContainer, Watch } from 'scrollmonitor-react/index'; | ||
| import { ScrollContainer } from 'scrollmonitor-react'; | ||
| // Your component works just like it does above | ||
| class Box extends React.Component { | ||
| render () { | ||
| var style = {} | ||
| if (this.props.isAboveViewport) { | ||
| style.backgroundColor = '#ffc'; | ||
| } else if (this.props.isBelowViewport) { | ||
| style.backgroundColor = '#ccf'; | ||
| } | ||
| import MyWatchedContainer from 'the/example/above'; | ||
| return (<span className="box" style={style}>{this.props.children}</span>); | ||
| } | ||
| } | ||
| var WatchedBox = Watch(Box); | ||
| // Your container gets this.props.scrollContainer, which it must pass to the child components. | ||
@@ -96,24 +105,4 @@ var Container = ScrollContainer(ContainerComponent extends React.Component { | ||
| return (<div className="container-scroll"> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <WatchedBox scrollContainer={this.props.scrollContainer}>{i++}</WatchedBox> | ||
| <MyWatchedContainer scrollContainer={this.props.scrollContainer}>{i++}</MyWatchedContainer> | ||
| {...times a million} | ||
| </div>); | ||
@@ -120,0 +109,0 @@ } |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.57%
24617
- Dev dependency count
- increased by20%
6
- Lines of code
- decreased by-1.12%
352
- Number of lines in readme file
- decreased by-9.17%
109
No dependency changes