Releases: civiccc/react-waypoint
3.1.3
3.1.2
3.1.1
v3.1.0
New properties have been added to the onEnter
/onLeave
/onPositionChange
callbacks:
waypointTop
- the waypoint's distance to the top of the viewport.viewportTop
- the distance from the scrollable ancestor to the viewport top.viewportBottom
- the distance from the bottom of the scrollable ancestor to the viewport top.
v3.0.0
Changes:
- Scroll events can now be throttled to improve performance. See the README on Throttling for more information.
threshold
has been split into two new props:bottomOffset
andtopOffset
. This means that you can trigger callbacks differently on the top and bottom edges (previous propthreshold
was used for both). The new props allow pixel values (e.g.'20px'
,20
), and percentages (e.g.'5%'
).
To migrate old waypoints using threshold
, you should translate the value into a percentage, and use bottomOffset
and topOffset
.
// Old code using `threshold`
<Waypoint threshold={0.1} />
// New code using `bottomOffset` and `topOffset`
<Waypoint bottomOffset='-10%' topOffset='-10%' />
// Alternatively, you can leave out one of the two offsets
<Waypoint topOffset='-10%' />
v2.0.2
v2.0.1
We're now on React ^15.0.0
. There were no changes needed to be made in order to support this version of React. We still allow peer dependencies on ^0.14.0
(which was the version before 15).
Thanks to @axelg12 for reporting this and @kamui for taking the time to fix it!
v2.0.0
In this release, the arguments passed to onEnter
, onLeave
and onPositionChange
has changed. Before, arguments would be listed as a flat arguments list starting with event
. Now everything is combined into a single object, passed down as a single argument. To upgrade, change event handlers from this
<Waypoint onEnter={(event, from) => {
// do something useful
}}
/>
to this
<Waypoint onEnter={({ previousPosition, currentPosition, event }) => {
// do something useful
}}
/>
Or, if you are more familiar with plain old js functions (i.e. no arrow functions or object destructuring), you'll do something like this:
<Waypoint onEnter={function(props) {
// here you can use `props.currentPosition`, `props.previousPosition`, and
// `props.event`
}}
/>
See the section on Prop types in the README for more information.