react-fade-in-view 1.2.5 → 1.2.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +20 -3
- package/package.json +11 -1
package/README.md
CHANGED
|
@@ -20,7 +20,6 @@ blogs, and content-heavy websites that need performant viewport animations.
|
|
|
20
20
|
- **Optional repeat:** Animate every time or just once
|
|
21
21
|
- **React & Next.js compatible**
|
|
22
22
|
- **TypeScript ready**
|
|
23
|
-
- **No extra CSS import required**
|
|
24
23
|
|
|
25
24
|
---
|
|
26
25
|
|
|
@@ -44,7 +43,7 @@ yarn add react-fade-in-view
|
|
|
44
43
|
import { FadeIn } from "react-fade-in-view";
|
|
45
44
|
import "react-fade-in-view/dist/index.css";
|
|
46
45
|
|
|
47
|
-
export default function
|
|
46
|
+
export default function FadeInWithChildElement() {
|
|
48
47
|
return (
|
|
49
48
|
<FadeIn direction="up">
|
|
50
49
|
<h1>Hello World</h1>
|
|
@@ -52,7 +51,7 @@ export default function App() {
|
|
|
52
51
|
);
|
|
53
52
|
}
|
|
54
53
|
|
|
55
|
-
export default function
|
|
54
|
+
export default function FadeInAsHTMLTag() {
|
|
56
55
|
return (
|
|
57
56
|
<FadeIn as="h1" direction="up">
|
|
58
57
|
Hello World
|
|
@@ -126,6 +125,24 @@ export default function Page() {
|
|
|
126
125
|
|
|
127
126
|
---
|
|
128
127
|
|
|
128
|
+
## 🤔 Why react-fade-in-view?
|
|
129
|
+
|
|
130
|
+
- Better performance than animation-heavy libraries
|
|
131
|
+
- Zero runtime dependencies
|
|
132
|
+
- Ideal replacement for simple Framer Motion use-cases
|
|
133
|
+
- Works perfectly with SSR & Next.js
|
|
134
|
+
|
|
135
|
+
---
|
|
136
|
+
|
|
137
|
+
## 🔎 Keywords
|
|
138
|
+
|
|
139
|
+
React fade animation, fade in on scroll React,
|
|
140
|
+
Intersection Observer React animation,
|
|
141
|
+
Next.js scroll animation,
|
|
142
|
+
lightweight React animation library
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
129
146
|
## ☕ Buy Me a Coffee
|
|
130
147
|
|
|
131
148
|
Love using **react-fade-in-view**?
|
package/package.json
CHANGED
|
@@ -1,7 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-fade-in-view",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.6",
|
|
4
4
|
"description": "Lightweight fade-in animation component using Intersection Observer",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"react",
|
|
7
|
+
"react-animation",
|
|
8
|
+
"fade-in",
|
|
9
|
+
"scroll-animation",
|
|
10
|
+
"intersection-observer",
|
|
11
|
+
"viewport-animation",
|
|
12
|
+
"nextjs",
|
|
13
|
+
"react-component"
|
|
14
|
+
],
|
|
5
15
|
"main": "dist/index.js",
|
|
6
16
|
"module": "dist/index.mjs",
|
|
7
17
|
"types": "dist/index.d.ts",
|