react-screenflow v0.0.6

React ScreenFlow 🚀

A smooth and elegant animation component for React, powered by framer-motion. Perfect for page transitions, modals, and more!

✨ Features

• 🎨 Multiple Animation Types: Choose from elegantSlide, smoothFade, materialScale, cardFlip, elastic, and swoosh.
• ⚡️ Optimized Performance: Uses framer-motion for buttery-smooth animations.
• 🌟 Highly Customizable: Add your own styles and animations with ease.
• 🛠️ TypeScript Support: Fully typed for a better developer experience.
• 📦 Lightweight: Minimal dependencies, optimized for production.

📥 Installation

Install the package using npm or yarn:

npm install react-screenflow

or

yarn add react-screenflow

Required Dependency

Ensure framer-motion is installed for animations to work:

npm install framer-motion

or

yarn add framer-motion

🚀 Usage

Here’s a simple example of how to use the ScreenFlow component in your React application:

import React from 'react';
import { ScreenFlow } from 'react-screenflow';

function App() {
  return (
    <ScreenFlow animation="smoothFade">
      <div>
        <h1>Welcome to My App</h1>
        <p>This content will animate smoothly!</p>
      </div>
    </ScreenFlow>
  );
}

export default App;

🔗 Demo

Check out a live demo on CodeSandbox:

View Demo on CodeSandbox

🔍 Preview: Live Preview

🌐 Official Website: React ScreenFlow

⚙️ Props

🎞️ Animation Types

Your package supports the following animations:

• elegantSlide: Smooth slide with blur effect.
• smoothFade: Fade with subtle scale and vertical movement.
• materialScale: Material Design-inspired scale and slide.
• cardFlip: Flip animation for card-like transitions.
• elastic: Bouncy, elastic animations.
• swoosh: Fast, swooshing motion.

📦 Dependencies

This package requires the following dependencies:

• framer-motion: ^10.16.4
• react: ^18.2.0
• react-dom: ^18.2.0
• react-router-dom: ^6.18.0

🛠️ Development

Build the Package

npm run build

Run in Development Mode

npm run dev

Preview the Build

npm run preview

🏗️ Tech Stack

• React: Core UI library.
• framer-motion: Animation engine.
• Vite: Build tool for fast development and production builds.
• TypeScript: Type-safe development.

📜 License

MIT © Milan Patel

🔗 GitHub Repository

Find the source code and contribute at:
MilanPatel2003/react-screenflow

🤝 Contributing

Contributions are welcome! Follow these steps:

1. Fork the repository.
2. Create a new branch: git checkout -b feature/YourFeature.
3. Commit your changes: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/YourFeature.
5. Open a pull request.

💡 Support

If you find this package useful, consider giving it a ⭐️ on GitHub!

Made with ❤️ by Milan Patel