stutrek/scrollmonitor-react

React HOC for the scrollMonitor

scrollmonitor-react's Issues

PropTypes from prop-types package

Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Trigger event at specific percentage view of the component

I'm able to trigger enter exit events, or the above/below events.
But I'm looking to trigger an event when scrolled, say, 75% or height of the component view.
How can I implement that?

I was able to trigger it, but the stateChange event wouldn't fire until one of the predefined events occured

Change initial value for props

Wanting to try to have the initial value, specifically in my case the isInViewport prop, to be true on the initial load. Is there a way to do this?

I've tried avoiding the initial false value by turning off autoStart but it seems to still pass a false value first than it stops the watch.

I've also tried to set the default prop to be true but it overrides the default to false than back to true.

questions regarding offsets

Hello again, Let me explain our use case that i am trying to use scroll monitor for, and then ask a question. (sorry, this may belong in the scrollMonitor repo)

We have a huge list of images/elements that are rendered in a grid. We want to use scroll monitor to detect when an element is fully in view, to send an analytics event saying that a specific element was in the users viewport. We also want to pre-load the images for the items that are about to come into view so that they will load before the element is in view as the user is scrolling. So if we had a 500 - 1000 pixel padding we would say "render this item because its now about to come into view, but don't send an analytic event because the user hasn't seen it yet". This could happen both with items below, and items above. (but items above will have already retrieved images from the server.

I've tried messing with offsets but the problem is that it skews the whole element being watched, so the isInView might be correct and we could start loading the image, but the isFullyInView is incorrect, because if the element is stretched enough, to say 500px, there is a very small window that in the middle of the view port that would be considered "Fully in view".

See the following image, where green is marked as isFullyInViewport and the red is just isInViewport

I would like to not have to fork scrollmonitor and change one line of code just for this use case, so i thought I would ask and see if you have used it for this before. Or if you know of a way that we could offset for isInView and not for isFullyInView.

Any sort of feedback would be super awesome!

Feature request: Throttle onscroll event

Would be good if you could throttle the actual scroll event to only run every x milliseconds.

Events - onEnter, onEnd

Are there any apis that trigger events like onEnter and onEnd? While everything works great, I required to use the common use case of the above events to trigger lazy loading and other functionality.

How do use locking?

How do we use Locking from the original library, so that we can watch the original area of the component with watcher.lock();?

Thanks!

setState is being called after component is unmounted

I've added a fix to destroy watcher in #6

React 16

peerDependencies currently specify react 15 currently. Can this be updated for react 16?

Change offset values dynamically

Hi there!

I'm using this awesome lib in a project and I have a special use case. I have different offsets based on different viewports (mobile, tablet and desktop). When testing on an iPad, for instance, I go from a tablet viewport to a desktop viewport because of the breakpoints (1024px).

Right now, I'm doing the viewport measurement on componentDidMount and using that to update the offsets object saved in the component's state. That gets passed down to the watched component. I thought that this would work but seems like scrollmonitor doesn't expect new offsets value to be sent, so even when the recalculateLocation is triggered, the lib is still using the old offsets value.

Is there a way of doing that? If not, is it ok if I open a PR with that kind of feature?

Thanks!

Outer props override inner props

See #4

Feature Request: PureWatch

Hi 🙂

Let's say I have a class component decorated by the Watch HOC and I only want to use enterViewport and leaveViewport props from outside this component.

My component re-render each-time one of this props change when I don't even use them :

"isBelowViewport"
"isInViewport"
"isAboveViewport"
"isFullyInViewport"
"lockWatcher"
"unlockWatcher"
"startWatcher"
"stopWatcher"
"enterViewport"
"exitViewport"
"onApplicationAdded"

The main idea is to have a way to replace this : https://github.com/stutrek/scrollmonitor-react/blob/master/index.js#L159 by something like :

const omitInternalProps = obj => require('lodash.omit')(obj, [
  'autoStart',
  'innerRef',
  'stateChange',
  'visibilityChange',
  'enterViewport',
  'fullyEnterViewport',
  'exitViewport',
  'partiallyExitViewport',
]);

return (
  <Component {...omitInternalProps(this.props))}>
     {this.props.children}
  </Component>
);

@stutrek what do you think ? Did I miss something ? 🤔

Doesn't run after install

Hey, excited to use this package, but i can't seem to get it working. When webpack tries to compile it gives me this error:

Error in ./~/scrollmonitor-react/index.js
Module parse failed: /<PATH>/node_modules/scrollmonitor-react/index.js Unexpected token (54:10)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (54:10)
 @ ./src/components/my-component.js 27:26-56

(where is the path to node modules)

I've tried changing the index.js to include "jsnext:main": "index.js",
and "main": "dist/index.js", But that also throws an error saying scrollMonitor is undefined.

I've verified scroll monitor is installed and tried messing with a couple things but still couldn't get it to run.

initial load with elements in view are set to wrong state

Everything (isInViewport, isAbove...) defaults to false. When an element loads, if its in the viewport, the corresponding states do not change to their correct state until you scroll those elements out of view and then back in.

I've tries creating a function

updateState = () => {
  this.setState({
        isInViewport: this.watcher.isInViewport,
        isAboveViewport: this.watcher.isAboveViewport,
        isBelowViewport: this.watcher.isBelowViewport,
        isFullyInViewport: this.watcher.isFullyInViewport
      })
    }

that is called by this.watcher.on('stateChange', this.updateState)

and then also calling it in the componentDidMount. This sets the states to the correct state, but right when you scroll, will change them back to all false, and will only change them back to the correct state when you scroll all the way to the top.