react-fade-in-view 1.0.0 → 1.2.0
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 +23 -21
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,20 +3,20 @@
|
|
|
3
3
|
A lightweight and easy-to-use **React fade-in animation component** using **Intersection Observer API**.
|
|
4
4
|
Perfect for landing pages, portfolios, blogs, or any content-heavy site.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
<!--  -->
|
|
7
7
|
|
|
8
8
|
---
|
|
9
9
|
|
|
10
10
|
## ✨ Features
|
|
11
11
|
|
|
12
|
-
-
|
|
13
|
-
-
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
12
|
+
- **Lightweight:** No extra animation libraries
|
|
13
|
+
- **Intersection Observer:** Animates elements on viewport enter
|
|
14
|
+
- **Simple API:** Easy to use, fully customizable
|
|
15
|
+
- **Directional animations:** Up, down, left, right
|
|
16
|
+
- **Optional repeat:** Animate every time or just once
|
|
17
|
+
- **React & Next.js compatible**
|
|
18
|
+
- **TypeScript ready**
|
|
19
|
+
- **No extra CSS import required**
|
|
20
20
|
|
|
21
21
|
---
|
|
22
22
|
|
|
@@ -38,6 +38,7 @@ yarn add react-fade-in-view
|
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
40
|
import { FadeIn } from "react-fade-in-view";
|
|
41
|
+
import "react-fade-in-view/dist/index.css";
|
|
41
42
|
|
|
42
43
|
export default function App() {
|
|
43
44
|
return (
|
|
@@ -71,22 +72,22 @@ export default function App() {
|
|
|
71
72
|
|
|
72
73
|
## ⚙️ Props
|
|
73
74
|
|
|
74
|
-
| Prop | Type
|
|
75
|
-
| ----------- |
|
|
76
|
-
| `as` | `React.ElementType`
|
|
77
|
-
| `direction` | `"up"
|
|
78
|
-
| `className` | `string`
|
|
79
|
-
| `immediate` | `boolean`
|
|
80
|
-
| `children` | `React.ReactNode`
|
|
81
|
-
| `...rest` | `any
|
|
75
|
+
| Prop | Type | Default | Description |
|
|
76
|
+
| ----------- | ------------------------------------- | ------- | --------------------------------------------------- |
|
|
77
|
+
| `as` | `React.ElementType` | `div` | Element or component to render instead of `div` |
|
|
78
|
+
| `direction` | `"up" \| "down" \| "left" \| "right"` | `up` | Fade-in animation direction |
|
|
79
|
+
| `className` | `string` | `""` | Optional custom CSS classes |
|
|
80
|
+
| `immediate` | `boolean` | `false` | Animate immediately instead of waiting for viewport |
|
|
81
|
+
| `children` | `React.ReactNode` | — | Content to animate |
|
|
82
|
+
| `...rest` | `any` | — | Pass extra props to the rendered element |
|
|
82
83
|
|
|
83
84
|
---
|
|
84
85
|
|
|
85
86
|
## 🕒 Custom Duration & Delay
|
|
86
87
|
|
|
87
88
|
```tsx
|
|
88
|
-
<FadeIn duration={800} delay={200}>
|
|
89
|
-
|
|
89
|
+
<FadeIn as="p" duration={800} delay={200}>
|
|
90
|
+
This fades in slowly with a delay
|
|
90
91
|
</FadeIn>
|
|
91
92
|
```
|
|
92
93
|
|
|
@@ -95,8 +96,8 @@ export default function App() {
|
|
|
95
96
|
## 🔁 Repeat Animation on Scroll
|
|
96
97
|
|
|
97
98
|
```tsx
|
|
98
|
-
<FadeIn once={false}>
|
|
99
|
-
|
|
99
|
+
<FadeIn as="p" once={false}>
|
|
100
|
+
This will animate every time it enters the viewport
|
|
100
101
|
</FadeIn>
|
|
101
102
|
```
|
|
102
103
|
|
|
@@ -106,6 +107,7 @@ export default function App() {
|
|
|
106
107
|
|
|
107
108
|
```tsx
|
|
108
109
|
import { FadeIn } from "react-fade-in-view";
|
|
110
|
+
import "react-fade-in-view/dist/index.css";
|
|
109
111
|
|
|
110
112
|
export default function Page() {
|
|
111
113
|
return (
|