You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: CHANGELOG.md
+11
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,16 @@
1
1
## master (unreleased)
2
2
3
+
## 7.0.0
4
+
5
+
This new major version contains breaking changes.
6
+
7
+
- Everything has been rewritten in TypeScript, which brings with it published type definitions
8
+
- The default export has been removed in favor of a named export; `import Scrollchor` must be replaced with `import { Scrollchor }`
9
+
- The `simulateClick()` API has been removed entirely
10
+
- Scrollchor is now a function component and makes use of hooks introduced in React v16.8, which necessitated a minimum version bump for this `peerDependency`
11
+
-`animation.easing` configuration is now documented and compatible with all the easing functions provided by [jquery-easing](https://github.com/danro/jquery-easing/blob/master/jquery.easing.js)
12
+
- Added two additional built-in easing types for _ease_ of use, borrowed from jQuery (`linear`, `swing`)
13
+
3
14
## 6.0.0
4
15
5
16
`Scrollchor` React component now belong to `Some React Component` Organization Team. This move will ensure its future development and manteniance.
* example [page](https://some-react-components.github.io/react-scrollchor/) and [source code](https://github.com/some-react-components/react-scrollchor/tree/example)
13
-
14
-
15
-
`hash` is the `id` of a HTML tag on current page.
16
12
13
+
`hash` is the `id` attribute of an HTML tag on the current page.
17
14
18
15
## Installation
19
16
@@ -23,17 +20,24 @@ See it in action:
23
20
npm install react-scrollchor --save
24
21
```
25
22
23
+
### yarn
24
+
25
+
```bash
26
+
yarn add react-scrollchor
27
+
```
28
+
26
29
### Dependencies
27
-
* User should provide their own `React` package
30
+
31
+
You must have React (≥16.8.0) installed in your project before trying to use this component. This minimum version constraint represents the React version which [introduced hooks](https://reactjs.org/docs/hooks-intro.html).
The package ships with TypeScript type definitions to help with IDE autocompletion, but the sections below should give you a quick rundown of each prop if you prefer this format. Any props not listed below are passed directly on to the underlying `<a>` tag, except for `href` and `onClick`.
61
72
62
-
## Prop types
63
-
```js
64
-
propTypes: {
65
-
66
-
/**
67
-
* id attribute of the target DOM node
68
-
* - `#` can be omitted
69
-
* - let it blank, `to = ''`, for scroll to page top
70
-
* - this prop is required
71
-
*/
72
-
to:PropTypes.string.isRequired,
73
-
74
-
/**
75
-
* id attribute of the scrollable DOM node
76
-
* - `#` can be omitted
77
-
* - uses the root element of the document if omitted
* callback function triggered before scroll to #hash
90
-
* @param1 Received click event
91
-
*/
92
-
beforeAnimate:PropTypes.func,
93
-
94
-
/**
95
-
* callback function triggered after scroll to #hash
96
-
* @param1 Received click event
97
-
*/
98
-
afterAnimate:PropTypes.func
99
-
100
-
/**
101
-
* enable/disable update browser history with scroll behaviours
102
-
* Default to `false`
103
-
*/
104
-
disableHistory:PropTypes.bool
105
-
}
106
-
```
107
-
### Reactive `props`
108
-
Update `props` will re-render `Scrollchor` element
73
+
The `to` prop controls the final `href` prop, and `onClick` is used internally to perform the scrolling. If you need to run some code when the link is clicked use the `beforeAnimate` prop instead.
The element scrolling will be performed on when clicked. Leading `#` will be stripped here as well.
119
82
120
-
### default animation settings
121
-
```js
122
-
{ offset:0, duration:400, easing: easeOutQuad }
123
-
```
124
-
This setting is equivalent to default jQuery.animate `easing: swing`
83
+
Scrollchor works within any scrollable parent container. If no target is provided (or the target element is not found on the page), the default is scrolling both the `<html>` and `<body>` elements simultaneously.
The smooth scrolling animation can be customized using this prop. Three pre-defined easing functions are exported by the package: `easeOutQuad`, `swing`, `linear`. When not provided, the default looks like this:
Scrollchor includes a dedicate API to do animate scroll programmatically that works like normal click events using `simulateClick()`.
99
+
*`offset?: number`— Additional pixels to scroll relative to the target element (supports negative values, e.g. for fixed position headers)
100
+
*`duration?: number`— Length of the animation in milliseconds
101
+
*`easing?: ScrollchorEasingFunction`— Easing function to calculate the animation steps. Pass a function that matches the exported interface for a custom easing.
|0|percent|Percent completed of the animation (decimal, `0.0` to `1.0`)|
106
+
|1|elapsedTime|Time elapsed since the animation began, in ms|
107
+
|2|startValue|Static value set to `0`|
108
+
|3|valueChange|Static value set to `1`|
109
+
|4|duration|Duration of the animation, in ms|
143
110
144
-
When used programmatically, some use-cases don't need `anchor tags`. On these cases use childless `Scrollchor`.
111
+
Returns a decimal indicating how close the animation is to the end value (`0` = start, `1` = finished, `1.2` = 20% over the end value, think "bounce" effects)
145
112
146
-
### Childless `Scrollchor`
147
-
This component will render `null` and the user is reponsible for storing the component [reference](https://facebook.github.io/react/docs/refs-and-the-dom.html), Ex: [childless](https://github.com/some-react-components/react-scrollchor/blob/example/src/App.js#L23)
You can use these callbacks to trigger behaviors like: update state, load async stuff, etc. when either stage happens. The functions receive the originating `MouseEvent` as their only argument, the return value is not used.
165
134
166
-
## Full Example
135
+
`beforeAnimate` is triggered before the animation starts, i.e. immediately when the link is clicked, while `afterAnimate` is called once the animation has finished.
0 commit comments