Skip to content

Commit 31e53f9

Browse files
olarssonolarsson
authored
Merge pull request #7 from olarsson/next
v1.1.10
2 parents 033ae42 + 05a94cf commit 31e53f9

28 files changed

Lines changed: 290 additions & 309 deletions

‎README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# react-scrollsy v1.1.9 ![](https://img.badgesize.io/olarsson/react-scrollsy/master/dist/react-scrollsy.es.js)
1+
# react-scrollsy v1.1.10 ![](https://img.badgesize.io/olarsson/react-scrollsy/master/dist/react-scrollsy.es.js)
22

33
An ambitious light-weight react module written in TypeScript for tracking scroll progress in a performant way. Developed for use with spring based animation libraries such as react-spring, but can be used with or without any library.
44

@@ -23,7 +23,7 @@ Here is a very basic example that tracks the scroll progress of the document.
2323
```js
2424
import { ScrollTrackerDocument, ScrollTracker } from "react-scrollsy";
2525

26-
import { IScrollData, IScrollObject } from "react-scrollsy/dist/types";
26+
import type { ScrollData, ScrollObject } from "react-scrollsy/dist/types";
2727

2828
import { useRef } from "react";
2929

@@ -32,7 +32,7 @@ function App() {
3232

3333
return (
3434
<ScrollTrackerDocument scrollThrottle={33}> // 1000 ms/30 fps = 33ms, limits the triggered events to 30 fps, optional
35-
{({ scrollData }: IScrollData) => {
35+
{({ scrollData }: ScrollData) => {
3636
return (
3737
<ScrollTracker
3838
scrollData={scrollData}
@@ -44,7 +44,7 @@ function App() {
4444
basedOn: "doc",
4545
},
4646
}}>
47-
{({ scrollObject }: IScrollObject) => {
47+
{({ scrollObject }: ScrollObject) => {
4848
return <h1 ref={refPageProgress}>Here is the scroll progress: {scrollObject.progress}</h1>;
4949
}}
5050
</ScrollTracker>
@@ -62,7 +62,7 @@ export default App;
6262
You don't use TypeScript? No problem, it's not a requirement. Simply remove the type declarations and it will work just fine. For example:
6363

6464
```js
65-
{({ scrollData }: IScrollData) => {
65+
{({ scrollData }: ScrollData) => {
6666
return (...);
6767
}}
6868
```
@@ -98,7 +98,7 @@ Creates a function which returns a `scrollData` object as such:
9898

9999
```js
100100
<ScrollTrackerDocument>
101-
{({ scrollData }: IScrollData) => {
101+
{({ scrollData }: ScrollData) => {
102102
return (
103103
// ScrollTracker components and other components can go inside here
104104
);
@@ -130,7 +130,7 @@ Creates a function which returns a `scrollData` object as such:
130130
<ScrollTrackerCustom
131131
key={active.toString()} // forces a rerender of the tracker, use this if you for example hide the element with 'display: none'
132132
scrollingElement='#custom-scroll-container'>
133-
{({ scrollData }: IScrollData) => {
133+
{({ scrollData }: ScrollData) => {
134134
return (
135135
// ScrollTracker components and other components can go inside here
136136
);
@@ -188,7 +188,7 @@ Creates a function which returns a `scrollObject` object as such:
188188
basedOn: "", // when using px this can be left empty
189189
},
190190
}}>
191-
{({ scrollObject }: IScrollObject) => {
191+
{({ scrollObject }: ScrollObject) => {
192192
return (
193193
// return for example the scrollObject.progress to reflect progress, and any other elements/components that you wish
194194
)

‎dist/config.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { IScrollTrackerObject } from './types';
1+
import type { ScrollTrackerObject } from './types';
22
export declare const defaultConfig: {
33
resizeThrottle: number;
44
trigger: string;
55
};
6-
export declare const emptyScrollObject: IScrollTrackerObject;
6+
export declare const emptyScrollObject: ScrollTrackerObject;

‎dist/functions/childrenAsMethod.d.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
import { IScrollDataChildren } from '../types';
2-
export declare const childrenAsMethod: ({ scrollData, children }: IScrollDataChildren) => any;
1+
import type { ScrollDataChildren } from '../types';
2+
export declare const childrenAsMethod: ({ scrollData, children }: ScrollDataChildren) => any;

‎dist/functions/elementVisibility.d.ts‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,52 @@
1-
import { IScrollDataBase, IScrollTrackerSettingsProperties } from '../types';
2-
export declare const calcOffset: ({ mode, scrollData, elementScrollHeight, offsetTop, offsetBottom }: {
1+
import type { ScrollDataBase, ScrollTrackerSettingsProperties } from '../types';
2+
interface CalcOffset {
33
mode: string;
4-
scrollData: IScrollDataBase;
4+
scrollData: ScrollDataBase;
55
elementScrollHeight: number;
6-
offsetTop?: IScrollTrackerSettingsProperties | undefined;
7-
offsetBottom?: IScrollTrackerSettingsProperties | undefined;
8-
}) => number;
9-
export declare const calcDurationInPx: ({ heightDuration, duration }: {
6+
offsetTop?: ScrollTrackerSettingsProperties;
7+
offsetBottom?: ScrollTrackerSettingsProperties;
8+
}
9+
interface CalcDurationInPx {
1010
heightDuration: number;
11-
duration: IScrollTrackerSettingsProperties;
12-
}) => number;
13-
export declare const calcHeightDurationAndElementOffset: ({ duration, elementScrollHeight, elementOffsetTopRelativeToContainer, trigger, scrollData }: {
14-
duration: IScrollTrackerSettingsProperties;
11+
duration: ScrollTrackerSettingsProperties;
12+
}
13+
interface CalcHeightDurationAndElementOffset {
14+
duration: ScrollTrackerSettingsProperties;
1515
elementScrollHeight: number;
1616
elementOffsetTopRelativeToContainer: number;
1717
trigger: string;
18-
scrollData: IScrollDataBase;
19-
}) => {
20-
heightDuration: number;
21-
elementOffset: number;
22-
};
23-
export declare const calcElementVisibilityReturn: ({ elementOffset, offsetTopVal, durationInPx, offsetBottomVal, scrollData }: {
18+
scrollData: ScrollDataBase;
19+
}
20+
interface CalcElementVisibilityReturn {
2421
elementOffset: number;
2522
offsetTopVal: number;
2623
durationInPx: number;
2724
offsetBottomVal: number;
28-
scrollData: IScrollDataBase;
29-
}) => {
25+
scrollData: ScrollDataBase;
26+
}
27+
interface ElementVisibility {
28+
el: HTMLElement;
29+
scrollData: ScrollDataBase;
30+
trigger: string;
31+
offsetTop?: ScrollTrackerSettingsProperties;
32+
offsetBottom?: ScrollTrackerSettingsProperties;
33+
duration: ScrollTrackerSettingsProperties;
34+
}
35+
export declare const calcOffset: ({ mode, scrollData, elementScrollHeight, offsetTop, offsetBottom }: CalcOffset) => number;
36+
export declare const calcDurationInPx: ({ heightDuration, duration }: CalcDurationInPx) => number;
37+
export declare const calcHeightDurationAndElementOffset: ({ duration, elementScrollHeight, elementOffsetTopRelativeToContainer, trigger, scrollData }: CalcHeightDurationAndElementOffset) => {
38+
heightDuration: number;
39+
elementOffset: number;
40+
};
41+
export declare const calcElementVisibilityReturn: ({ elementOffset, offsetTopVal, durationInPx, offsetBottomVal, scrollData }: CalcElementVisibilityReturn) => {
3042
progress: number;
3143
start: number;
3244
end: number;
3345
};
34-
declare const elementVisibility: (el: HTMLElement, scrollData: IScrollDataBase, trigger: string, offsetTop: IScrollTrackerSettingsProperties | undefined, offsetBottom: IScrollTrackerSettingsProperties | undefined, duration: IScrollTrackerSettingsProperties) => {
46+
export declare const elementVisibility: ({ el, scrollData, trigger, offsetTop, offsetBottom, duration }: ElementVisibility) => {
3547
progress: number;
36-
scrollData: IScrollDataBase;
48+
scrollData: ScrollDataBase;
3749
start: number;
3850
end: number;
3951
};
40-
export { elementVisibility };
52+
export {};

‎dist/functions/onScroll.d.ts‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import { Dispatch } from 'react';
2-
import { TScrollingElement, TTimeout } from '../types';
3-
export declare const onScroll: ({ timeout, setProgress, scrollElement, containerHeight }: {
4-
timeout: TTimeout;
1+
import type { Dispatch } from 'react';
2+
import type { ScrollingElement, Timeout } from '../types';
3+
interface OnScroll {
4+
timeout: Timeout;
55
setProgress: Dispatch<number>;
6-
scrollElement: TScrollingElement;
6+
scrollElement?: ScrollingElement;
77
containerHeight: number;
8-
}) => void;
8+
}
9+
export declare const onScroll: ({ timeout, setProgress, scrollElement, containerHeight }: OnScroll) => void;
10+
export {};

‎dist/functions/utils.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@ export declare const throttleLastCall: <T extends (...args: any[]) => void>(func
88
export declare const windowHeight: () => number;
99
export declare const getContainerClientHeight: (elem: HTMLElement) => number;
1010
export declare function waitForElm(selector: any): Promise<HTMLElement>;
11-
export declare const elOffsetTopRelativeToContainer: (el: HTMLElement | undefined, container: HTMLElement | undefined) => number;
11+
export declare const elOffsetTopRelativeToContainer: (el?: HTMLElement, container?: HTMLElement) => number;
1212
export declare const isIOS: () => boolean;
1313
export declare const correctInnerHeight: () => number;

0 commit comments

Comments
 (0)