react-fade-in-view 1.2.6 → 1.2.7

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Aayush Daboriya
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -16,7 +16,7 @@ blogs, and content-heavy websites that need performant viewport animations.
 - **Lightweight:** No extra animation libraries
 - **Intersection Observer:** Animates elements on viewport enter
 - **Simple API:** Easy to use, fully customizable
-- **Directional animations:** Up, down, left, right
+- **Directional animations:** Up, down, left, right, fade, zoom
 - **Optional repeat:** Animate every time or just once
 - **React & Next.js compatible**
 - **TypeScript ready**
@@ -69,20 +69,22 @@ export default function FadeInAsHTMLTag() {
 <FadeIn direction="right">Right Fade</FadeIn>
 <FadeIn direction="up">Up Fade</FadeIn>
 <FadeIn direction="down">Down Fade</FadeIn>
+<FadeIn direction="fade">Fade Only</FadeIn>
+<FadeIn direction="zoom">Zoom In</FadeIn>
 ```
 
 ---
 
 ## ⚙️ Props
 
-| Prop        | Type                                  | Default | Description                                         |
-| ----------- | ------------------------------------- | ------- | --------------------------------------------------- |
-| `as`        | `React.ElementType`                   | `div`   | Element or component to render instead of `div`     |
-| `direction` | `"up" \| "down" \| "left" \| "right"` | `up`    | Fade-in animation direction                         |
-| `className` | `string`                              | `""`    | Optional custom CSS classes                         |
-| `immediate` | `boolean`                             | `false` | Animate immediately instead of waiting for viewport |
-| `children`  | `React.ReactNode`                     | —       | Content to animate                                  |
-| `...rest`   | `any`                                 | —       | Pass extra props to the rendered element            |
+| Prop        | Type                                                      | Default | Description                                         |
+| ----------- | --------------------------------------------------------- | ------- | --------------------------------------------------- |
+| `as`        | `React.ElementType`                                       | `div`   | Element or component to render instead of `div`     |
+| `direction` | `"up" \| "down" \| "left" \| "right" \| "fade" \| "zoom"` | `up`    | Animation style / direction                         |
+| `className` | `string`                                                  | `""`    | Optional custom CSS classes                         |
+| `immediate` | `boolean`                                                 | `false` | Animate immediately instead of waiting for viewport |
+| `children`  | `React.ReactNode`                                         | —       | Content to animate                                  |
+| `...rest`   | `any`                                                     | —       | Pass extra props to the rendered element            |
 
 ---
 

package/dist/index.css

@@ -39,6 +39,24 @@
     transform: translateY(0);
   }
 }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes zoomIn {
+  from {
+    opacity: 0;
+    transform: scale(0.85);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 .fade-in-left {
   animation: fadeInLeft 0.6s ease-out forwards;
 }
@@ -51,6 +69,12 @@
 .fade-in-down {
   animation: fadeInDown 0.6s ease-out forwards;
 }
+.fade-in-fade {
+  animation: fadeIn 0.6s ease-out forwards;
+}
+.fade-in-zoom {
+  animation: zoomIn 0.6s ease-out forwards;
+}
 .opacity-0 {
   opacity: 0;
 }

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
 
-type Direction = "left" | "right" | "up" | "down";
+type Direction = "left" | "right" | "up" | "down" | "fade" | "zoom";
 type FadeInProps<T extends ElementType> = {
     as?: T;
     direction?: Direction;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
 
-type Direction = "left" | "right" | "up" | "down";
+type Direction = "left" | "right" | "up" | "down" | "fade" | "zoom";
 type FadeInProps<T extends ElementType> = {
     as?: T;
     direction?: Direction;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fade-in-view",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Lightweight fade-in animation component using Intersection Observer",
   "keywords": [
     "react",