Installation

Installation

To get started with React-swiftReveal, follow these simple steps:

  1. Installation via npm:

    npm install react-swift-reveal

  2. Installation via yarn:

    yarn add react-swift-reveal

  3. Installation via pnpm:

    pnpm add react-swift-reveal

Example Usage

Let's dive into how you can use React-swiftReveal to add captivating animations to your components.

Using <Fade> with a HTML Element

demo.js
import { Fade } from "react-swift-reveal";
 
const App = () => {
  return (
    <Fade>
      <h2>This is a heading</h2>
    </Fade>
  );
};

In this example, we utilize the <Fade> component to animate a heading element (<h2>) as it enters the viewport. The heading will smoothly fade in, adding a stylish touch to your UI.

Using <Fade> with an Imported Component

demo.js
import { Fade } from "react-swift-reveal";
import MyComponent from "./MyComponent"; // Import your component here
 
const App = () => {
  return (
    <Fade>
      <MyComponent /> {/* Component to be animated */}
    </Fade>
  );
};

Passing Props to <Fade>

demo.js
import { Fade } from "react-swift-reveal";
import MyComponent from "./MyComponent"; // Import your component here
 
const App = () => {
  return (
    <Fade duration={1000} delay={500} distance="30px">
      <MyComponent /> {/* Component to be animated */}
    </Fade>
  );
};

Usage with next.js App Directory

app/page.jsx
"use client";
 
import { Fade } from "react-swift-reveal";
 
export default function Home() {
  return (
    <Fade>
      <h2>Next.js appDir</h2>
    </Fade>
  );
}
IntroductionAnimation Props