Skip to content

Commit b1c3db4

Browse files
p333terp333ter
committed
First release
0 parents  commit b1c3db4

File tree

15 files changed

+10246
-0
lines changed

15 files changed

+10246
-0
lines changed

‎.github/workflows/publish.yml

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
name: Publish to NPM
2+
on:
3+
push:
4+
tags:
5+
- 'v*'
6+
7+
jobs:
8+
build:
9+
runs-on: ubuntu-latest
10+
steps:
11+
- uses: actions/checkout@v3
12+
- uses: actions/setup-node@v3
13+
with:
14+
node-version: '18.x'
15+
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
20+
env:
21+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

‎.gitignore

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# Dependencies
2+
node_modules/
3+
.pnp
4+
.pnp.js
5+
6+
# Testing
7+
coverage/
8+
9+
# Production
10+
dist/
11+
build/
12+
13+
# Misc
14+
.DS_Store
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*
23+
24+
# IDEs and editors
25+
.idea/
26+
.vscode/
27+
*.swp
28+
*.swo

‎README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# @ppasmik/react-scroll-trigger
2+
3+
Modern React component for detecting and responding to scroll events with TypeScript support.
4+
5+
## Installation
6+
7+
```bash
8+
npm install @ppasmik/react-scroll-trigger
9+
# or
10+
yarn add @ppasmik/react-scroll-trigger

‎example/package.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "react-scroll-trigger-demo",
3+
"private": true,
4+
"scripts": {
5+
"start": "vite",
6+
"build": "vite build"
7+
},
8+
"dependencies": {
9+
"react": "^18.0.0",
10+
"react-dom": "^18.0.0",
11+
"@ppasmik/react-scroll-trigger": "file:../"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-react": "^4.0.0",
15+
"vite": "^5.0.0"
16+
}
17+
}

‎example/src/App.tsx

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import ScrollTrigger from '@ppasmik/react-scroll-trigger';
2+
import React, { useState } from 'react';
3+
4+
const DemoSection = ({ color, index }: { color: string; index: number }) => {
5+
const [isVisible, setIsVisible] = useState(false);
6+
7+
return (
8+
<ScrollTrigger
9+
onEnter={() => setIsVisible(true)}
10+
onExit={() => setIsVisible(false)}
11+
>
12+
<div
13+
style={{
14+
height: '100vh',
15+
backgroundColor: color,
16+
opacity: isVisible ? 1 : 0.3,
17+
transition: 'opacity 0.5s ease-in-out',
18+
display: 'flex',
19+
alignItems: 'center',
20+
justifyContent: 'center',
21+
fontSize: '2rem',
22+
color: 'white',
23+
}}
24+
>
25+
Section {index}
26+
</div>
27+
</ScrollTrigger>
28+
);
29+
};
30+
31+
const App = () => {
32+
const colors = ['#2ecc71', '#3498db', '#9b59b6', '#e74c3c'];
33+
34+
return (
35+
<div>
36+
{colors.map((color, index) => (
37+
<DemoSection key={color} color={color} index={index + 1} />
38+
))}
39+
</div>
40+
);
41+
};
42+
43+
export default App;

‎example/src/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>React Scroll Trigger Demo</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎example/src/main.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom/client'
3+
import App from './App'
4+
import './styles.css'
5+
6+
ReactDOM.createRoot(document.getElementById('root')!).render(
7+
<React.StrictMode>
8+
<App />
9+
</React.StrictMode>
10+
)

‎example/src/styles.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
9+
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
10+
}
11+
12+
.section {
13+
min-height: 100vh;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
font-size: 2rem;
18+
transition: all 0.5s ease;
19+
}

‎example/vite.config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import react from '@vitejs/plugin-react'
2+
import { defineConfig } from 'vite'
3+
4+
export default defineConfig({
5+
plugins: [react()],
6+
server: {
7+
port: 3000,
8+
open: true
9+
}
10+
})

0 commit comments

Comments
 (0)