react-fade-in-view 1.0.0

package/README.md

@@ -0,0 +1,125 @@
+# react-fade-in-view
+
+A lightweight and easy-to-use **React fade-in animation component** using **Intersection Observer API**.  
+Perfect for landing pages, portfolios, blogs, or any content-heavy site.
+
+![Demo](https://user-images.githubusercontent.com/yourusername/demo.gif)
+
+---
+
+## ✨ Features
+
+- ⚡ **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
+- 🔁 **Optional repeat:** Animate every time or just once
+- 📦 **React & Next.js compatible**
+- ✅ **TypeScript ready**
+- ❌ **No extra CSS import required**
+
+---
+
+## 📦 Installation
+
+```bash
+npm install react-fade-in-view
+```
+
+or
+
+```bash
+yarn add react-fade-in-view
+```
+
+---
+
+## 🚀 Basic Usage
+
+```tsx
+import { FadeIn } from "react-fade-in-view";
+
+export default function App() {
+  return (
+    <FadeIn direction="up">
+      <h1>Hello World</h1>
+    </FadeIn>
+  );
+}
+
+export default function App() {
+  return (
+    <FadeIn as="h1" direction="up">
+      Hello World
+    </FadeIn>
+  );
+}
+```
+
+---
+
+## 🧭 Animation Directions
+
+```tsx
+<FadeIn direction="left">Left Fade</FadeIn>
+<FadeIn direction="right">Right Fade</FadeIn>
+<FadeIn direction="up">Up Fade</FadeIn>
+<FadeIn direction="down">Down Fade</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 other element props` | —       | Pass extra props to the rendered element            |
+
+---
+
+## 🕒 Custom Duration & Delay
+
+```tsx
+<FadeIn duration={800} delay={200}>
+  <p>This fades in slowly with a delay</p>
+</FadeIn>
+```
+
+---
+
+## 🔁 Repeat Animation on Scroll
+
+```tsx
+<FadeIn once={false}>
+  <p>This will animate every time it enters the viewport</p>
+</FadeIn>
+```
+
+---
+
+## 🔗 Next.js Usage Example
+
+```tsx
+import { FadeIn } from "react-fade-in-view";
+
+export default function Page() {
+  return (
+    <main>
+      <FadeIn direction="up">
+        <h1>Next.js Page with FadeIn</h1>
+      </FadeIn>
+    </main>
+  );
+}
+```
+
+---
+
+## 📄 License
+
+MIT © Aayush Daboriya

package/dist/index.css

@@ -0,0 +1,56 @@
+/* src/styles.css */
+@keyframes fadeInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.fade-in-left {
+  animation: fadeInLeft 0.6s ease-out forwards;
+}
+.fade-in-right {
+  animation: fadeInRight 0.6s ease-out forwards;
+}
+.fade-in-up {
+  animation: fadeInUp 0.6s ease-out forwards;
+}
+.fade-in-down {
+  animation: fadeInDown 0.6s ease-out forwards;
+}
+.opacity-0 {
+  opacity: 0;
+}

package/dist/index.d.mts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+type Direction = "left" | "right" | "up" | "down";
+type FadeInProps<T extends ElementType> = {
+    as?: T;
+    direction?: Direction;
+    className?: string;
+    immediate?: boolean;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "className" | "children">;
+declare const FadeIn: <T extends ElementType = "div">({ as, direction, className, immediate, children, ...rest }: FadeInProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { FadeIn };

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ElementType, ReactNode, ComponentPropsWithoutRef } from 'react';
+
+type Direction = "left" | "right" | "up" | "down";
+type FadeInProps<T extends ElementType> = {
+    as?: T;
+    direction?: Direction;
+    className?: string;
+    immediate?: boolean;
+    children: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "className" | "children">;
+declare const FadeIn: <T extends ElementType = "div">({ as, direction, className, immediate, children, ...rest }: FadeInProps<T>) => react_jsx_runtime.JSX.Element;
+
+export { FadeIn };

package/dist/index.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  FadeIn: () => FadeIn_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/useInView.ts
+var import_react = require("react");
+var useInView = (options) => {
+  const ref = (0, import_react.useRef)(null);
+  const [isVisible, setIsVisible] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    if (!ref.current)
+      return;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+        observer.disconnect();
+      }
+    }, options);
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [options]);
+  return { ref, isVisible };
+};
+
+// src/FadeIn.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FadeIn = ({
+  as,
+  direction = "up",
+  className = "",
+  immediate = false,
+  children,
+  ...rest
+}) => {
+  const { ref, isVisible } = useInView();
+  const Component = as || "div";
+  const animationClass = immediate ? `fade-in-${direction}` : isVisible ? `fade-in-${direction}` : "opacity-0";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ref,
+      className: `${animationClass} ${className}`,
+      ...rest,
+      children
+    }
+  );
+};
+var FadeIn_default = FadeIn;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FadeIn
+});

package/dist/index.mjs

@@ -0,0 +1,47 @@
+// src/useInView.ts
+import { useEffect, useRef, useState } from "react";
+var useInView = (options) => {
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (!ref.current)
+      return;
+    const observer = new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        setIsVisible(true);
+        observer.disconnect();
+      }
+    }, options);
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [options]);
+  return { ref, isVisible };
+};
+
+// src/FadeIn.tsx
+import { jsx } from "react/jsx-runtime";
+var FadeIn = ({
+  as,
+  direction = "up",
+  className = "",
+  immediate = false,
+  children,
+  ...rest
+}) => {
+  const { ref, isVisible } = useInView();
+  const Component = as || "div";
+  const animationClass = immediate ? `fade-in-${direction}` : isVisible ? `fade-in-${direction}` : "opacity-0";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      ref,
+      className: `${animationClass} ${className}`,
+      ...rest,
+      children
+    }
+  );
+};
+var FadeIn_default = FadeIn;
+export {
+  FadeIn_default as FadeIn
+};

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "react-fade-in-view",
+  "version": "1.0.0",
+  "description": "Lightweight fade-in animation component using Intersection Observer",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format esm,cjs --clean",
+    "dev": "tsup src/index.ts --watch"
+  },
+  "author": "Aayush Daboriya",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "0.17.19",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tsup": "7.2.0",
+    "typescript": "^5.0.0"
+  }
+}