Skip to content

Commit 0f86ae5

Browse files
p333terp333ter
committed
Updated tests and github workflow
1 parent b1c3db4 commit 0f86ae5

File tree

8 files changed

+244
-45
lines changed

8 files changed

+244
-45
lines changed

‎.github/workflows/publish.yml‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
name: Publish to NPM
22
on:
3-
push:
4-
tags:
5-
- 'v*'
3+
release:
4+
types: [published]
65

76
jobs:
87
build:
98
runs-on: ubuntu-latest
109
steps:
11-
- uses: actions/checkout@v3
12-
- uses: actions/setup-node@v3
10+
- name: Checkout code
11+
uses: actions/checkout@v4
12+
13+
- name: Setup Node.js
14+
uses: actions/setup-node@v4
1315
with:
14-
node-version: '18.x'
16+
node-version: '18.18.0'
1517
registry-url: 'https://registry.npmjs.org'
16-
- run: npm ci
17-
- run: npm test
18-
- run: npm run build
19-
- run: npm publish --access public
18+
cache: 'npm'
19+
20+
- name: Validate package version
21+
run: |
22+
PACKAGE_VERSION=$(node -p "require('./package.json').version")
23+
RELEASE_VERSION=${GITHUB_REF#refs/tags/v}
24+
if [ "$PACKAGE_VERSION" != "$RELEASE_VERSION" ]; then
25+
echo "Package version ($PACKAGE_VERSION) does not match release version ($RELEASE_VERSION)"
26+
exit 1
27+
fi
28+
29+
- name: Install dependencies
30+
run: npm ci
31+
32+
- name: Run tests
33+
run: npm test
34+
35+
- name: Build package
36+
run: npm run build
37+
38+
- name: Publish to NPM
39+
run: npm publish --access public
2040
env:
2141
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

‎README.md‎

Lines changed: 105 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,111 @@
11
# @ppasmik/react-scroll-trigger
22

3-
Modern React component for detecting and responding to scroll events with TypeScript support.
3+
[![npm](https://img.shields.io/npm/v/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
4+
[![NPM](https://img.shields.io/npm/l/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
5+
[![npm](https://img.shields.io/npm/dt/@ppasmik/react-scroll-trigger?style=flat-square)](https://www.npmjs.com/package/@ppasmik/react-scroll-trigger)
6+
7+
A modern, TypeScript-based React component for monitoring scroll events and triggering callbacks when elements enter, exit, or progress through the viewport. This is a rewritten and modernized version of the original react-scroll-trigger package.
8+
9+
Each callback includes `progress` and `velocity` parameters, enabling precise control over animations and transitions based on scroll position and speed.
410

511
## Installation
612

7-
```bash
13+
```sh
814
npm install @ppasmik/react-scroll-trigger
9-
# or
10-
yarn add @ppasmik/react-scroll-trigger
15+
```
16+
17+
or via Yarn:
18+
19+
```sh
20+
yarn add @ppasmik/react-scroll-trigger
21+
```
22+
23+
## Usage
24+
25+
```tsx
26+
import ScrollTrigger from '@ppasmik/react-scroll-trigger';
27+
28+
const MyComponent = () => {
29+
const [visible, setVisible] = useState(false);
30+
31+
const onEnterViewport = () => {
32+
setVisible(true);
33+
};
34+
35+
const onExitViewport = () => {
36+
setVisible(false);
37+
};
38+
39+
return (
40+
<ScrollTrigger onEnter={onEnterViewport} onExit={onExitViewport}>
41+
<div className={`container ${visible ? 'container-animate' : ''}`} />
42+
</ScrollTrigger>
43+
);
44+
};
45+
```
46+
47+
The `ScrollTrigger` component is designed to be highly flexible. You can use it:
48+
49+
- As a standalone element without children
50+
51+
```tsx
52+
<ScrollTrigger onEnter={handleEnter} onExit={handleExit} />
53+
```
54+
55+
- With children to receive events based on their dimensions
56+
57+
```tsx
58+
<ScrollTrigger onEnter={handleEnter} onProgress={handleProgress}>
59+
<section>
60+
<h1>Your content here</h1>
61+
</section>
62+
</ScrollTrigger>
63+
```
64+
65+
Common use cases include:
66+
67+
- Triggering animations when elements become visible
68+
- Loading content dynamically based on scroll position
69+
- Creating scroll-based transitions and effects
70+
- Implementing infinite scroll functionality
71+
72+
## Props
73+
74+
| Prop | Type | Default | Description |
75+
| ---------------- | -------------------- | ------------------------ | -------------------------------------------------------------------- |
76+
| `component` | ElementType | 'div' | React component or HTML element to render as wrapper |
77+
| `containerRef` | HTMLElement ⎮ string | document.documentElement | Scrolling container reference |
78+
| `throttleResize` | number | 100 | Resize event throttle in ms |
79+
| `throttleScroll` | number | 100 | Scroll event throttle in ms |
80+
| `triggerOnLoad` | boolean | true | Whether to trigger onEnter on mount |
81+
| `onEnter` | function | - | Called when element enters viewport `({progress, velocity}) => void` |
82+
| `onExit` | function | - | Called when element exits viewport `({progress, velocity}) => void` |
83+
| `onProgress` | function | - | Called during scroll `({progress, velocity}) => void` |
84+
85+
Standard React props (className, style, etc.) are also supported and will be passed to the wrapper element.
86+
87+
## Technical Details
88+
89+
The component uses React hooks for efficient state management:
90+
- `useRef` to track the DOM element position
91+
- `useState` for viewport visibility and scroll tracking
92+
- `useEffect` for handling scroll and resize events with proper cleanup
93+
94+
Visibility detection:
95+
- Uses `getBoundingClientRect()` for accurate element position calculation
96+
- Progress is calculated based on element's position relative to viewport:
97+
```ts
98+
progress = 1 - elementRect.bottom / (viewportEnd + elementRect.height)
99+
```
100+
- Velocity is derived from scroll position changes over time
101+
- All calculations are throttled (default 100ms) to optimize performance
102+
103+
The component is designed to work with both window-level scrolling and custom scroll containers (via `containerRef` prop), making it suitable for various layout scenarios.
104+
105+
## License
106+
107+
MIT © [Peter Pasmik]
108+
109+
## Acknowledgments
110+
111+
This package is a TypeScript rewrite of the original [react-scroll-trigger](https://www.npmjs.com/package/react-scroll-trigger) package, modernized with current React practices and enhanced type safety.

‎jest.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
module.exports = {
2+
preset: 'ts-jest',
3+
testEnvironment: 'jsdom',
4+
setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
5+
testPathIgnorePatterns: ['/node_modules/', '/example/'],
6+
modulePathIgnorePatterns: ['/example/'],
7+
moduleDirectories: ['node_modules'],
8+
transform: {
9+
'^.+\\.(ts|tsx)$': 'ts-jest',
10+
},
11+
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
12+
watchPathIgnorePatterns: ['/example/'],
13+
};

‎package-lock.json‎

Lines changed: 47 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,22 @@
11
{
22
"name": "@ppasmik/react-scroll-trigger",
33
"version": "1.0.0",
4-
"description": "Modern React component for scroll-based triggers and animations with TypeScript support",
5-
"author": "ppasmik",
4+
"description": "Modern React component for scroll-based triggers and animations with TypeScript support. A rewritten and modernized version of the original react-scroll-trigger package.",
5+
"author": "Peter Pasmik",
66
"license": "MIT",
77
"repository": {
88
"type": "git",
9-
"url": "git+https://github.com/ppasmik/react-scroll-trigger.git"
9+
"url": "git+https://github.com/p333ter/react-scroll-trigger.git"
1010
},
1111
"main": "dist/cjs/index.js",
1212
"module": "dist/esm/index.js",
1313
"types": "dist/index.d.ts",
1414
"files": [
1515
"dist"
1616
],
17-
"type": "module",
1817
"scripts": {
19-
"build": "rollup --config rollup.config.cjs",
20-
"test": "jest",
18+
"build": "rollup -c",
19+
"test": "jest --config jest.config.js",
2120
"prepare": "npm run build",
2221
"dev": "cd example && npm start",
2322
"clean": "rimraf dist",
@@ -48,7 +47,10 @@
4847
"rollup": "^4.0.0",
4948
"rollup-plugin-dts": "^6.0.0",
5049
"ts-jest": "^29.0.0",
51-
"typescript": "^5.0.0"
50+
"tslib": "^2.6.2",
51+
"typescript": "^5.0.0",
52+
"react": "^18.2.0",
53+
"react-dom": "^18.2.0"
5254
},
5355
"dependencies": {
5456
"lodash.throttle": "^4.1.1"
@@ -61,17 +63,11 @@
6163
"viewport",
6264
"animation",
6365
"typescript",
64-
"hooks"
66+
"hooks",
67+
"react-scroll-trigger"
6568
],
6669
"bugs": {
67-
"url": "https://github.com/ppasmik/react-scroll-trigger/issues"
70+
"url": "https://github.com/p333ter/react-scroll-trigger/issues"
6871
},
69-
"homepage": "https://github.com/ppasmik/react-scroll-trigger#readme",
70-
"jest": {
71-
"preset": "ts-jest",
72-
"testEnvironment": "jsdom",
73-
"setupFilesAfterEnv": [
74-
"@testing-library/jest-dom/extend-expect"
75-
]
76-
}
72+
"homepage": "https://github.com/p333ter/react-scroll-trigger#readme"
7773
}

‎rollup.config.js‎

Lines changed: 13 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
1-
import commonjs from '@rollup/plugin-commonjs';
2-
import resolve from '@rollup/plugin-node-resolve';
3-
import typescript from '@rollup/plugin-typescript';
4-
import { readFileSync } from 'fs';
5-
import dts from 'rollup-plugin-dts';
1+
const typescript = require('@rollup/plugin-typescript');
2+
const commonjs = require('@rollup/plugin-commonjs');
3+
const resolve = require('@rollup/plugin-node-resolve');
4+
const { dts } = require('rollup-plugin-dts');
65

7-
const packageJson = JSON.parse(
8-
readFileSync(new URL('./package.json', import.meta.url), 'utf8')
9-
);
6+
const packageJson = require('./package.json');
107

11-
const config = [
8+
module.exports = [
129
{
1310
input: 'src/index.ts',
1411
output: [
@@ -26,15 +23,17 @@ const config = [
2623
plugins: [
2724
resolve(),
2825
commonjs(),
29-
typescript({ tsconfig: './tsconfig.json' }),
26+
typescript({
27+
tsconfig: './tsconfig.json',
28+
declaration: true,
29+
declarationDir: './dist/types',
30+
}),
3031
],
3132
external: ['react', 'lodash/throttle', 'lodash.throttle'],
3233
},
3334
{
34-
input: 'dist/types/index.d.ts',
35-
output: [{ file: packageJson.types, format: 'esm' }],
35+
input: 'src/index.ts', // zmenené z dist/types/index.d.ts
36+
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
3637
plugins: [dts()],
3738
},
3839
];
39-
40-
e;

‎src/setupTests.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
import '@testing-library/jest-dom';

‎tsconfig.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"module": "esnext",
5+
"lib": ["dom", "esnext"],
6+
"declaration": true,
7+
"declarationDir": "dist/types",
8+
"jsx": "react",
9+
"sourceMap": true,
10+
"outDir": "dist",
11+
"strict": true,
12+
"moduleResolution": "node",
13+
"allowSyntheticDefaultImports": true,
14+
"esModuleInterop": true,
15+
"skipLibCheck": true,
16+
"forceConsistentCasingInFileNames": true,
17+
"resolveJsonModule": true,
18+
"types": ["jest", "@testing-library/jest-dom"]
19+
},
20+
"include": ["src"],
21+
"exclude": ["node_modules", "dist", "example"]
22+
}

0 commit comments

Comments
 (0)