react-fade-in-view 1.0.0 → 1.1.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 +22 -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
|
|
|
@@ -71,22 +71,22 @@ export default function App() {
|
|
|
71
71
|
|
|
72
72
|
## ⚙️ Props
|
|
73
73
|
|
|
74
|
-
| Prop | Type
|
|
75
|
-
| ----------- |
|
|
76
|
-
| `as` | `React.ElementType`
|
|
77
|
-
| `direction` | `"up"
|
|
78
|
-
| `className` | `string`
|
|
79
|
-
| `immediate` | `boolean`
|
|
80
|
-
| `children` | `React.ReactNode`
|
|
81
|
-
| `...rest` | `any
|
|
74
|
+
| Prop | Type | Default | Description |
|
|
75
|
+
| ----------- | ------------------------------------- | ------- | --------------------------------------------------- |
|
|
76
|
+
| `as` | `React.ElementType` | `div` | Element or component to render instead of `div` |
|
|
77
|
+
| `direction` | `"up" \| "down" \| "left" \| "right"` | `up` | Fade-in animation direction |
|
|
78
|
+
| `className` | `string` | `""` | Optional custom CSS classes |
|
|
79
|
+
| `immediate` | `boolean` | `false` | Animate immediately instead of waiting for viewport |
|
|
80
|
+
| `children` | `React.ReactNode` | — | Content to animate |
|
|
81
|
+
| `...rest` | `any` | — | Pass extra props to the rendered element |
|
|
82
82
|
|
|
83
83
|
---
|
|
84
84
|
|
|
85
85
|
## 🕒 Custom Duration & Delay
|
|
86
86
|
|
|
87
87
|
```tsx
|
|
88
|
-
<FadeIn duration={800} delay={200}>
|
|
89
|
-
|
|
88
|
+
<FadeIn as="p" duration={800} delay={200}>
|
|
89
|
+
This fades in slowly with a delay
|
|
90
90
|
</FadeIn>
|
|
91
91
|
```
|
|
92
92
|
|
|
@@ -95,8 +95,8 @@ export default function App() {
|
|
|
95
95
|
## 🔁 Repeat Animation on Scroll
|
|
96
96
|
|
|
97
97
|
```tsx
|
|
98
|
-
<FadeIn once={false}>
|
|
99
|
-
|
|
98
|
+
<FadeIn as="p" once={false}>
|
|
99
|
+
This will animate every time it enters the viewport
|
|
100
100
|
</FadeIn>
|
|
101
101
|
```
|
|
102
102
|
|
|
@@ -106,6 +106,7 @@ export default function App() {
|
|
|
106
106
|
|
|
107
107
|
```tsx
|
|
108
108
|
import { FadeIn } from "react-fade-in-view";
|
|
109
|
+
import "react-fade-in-view/dist/index.css";
|
|
109
110
|
|
|
110
111
|
export default function Page() {
|
|
111
112
|
return (
|