🌌 React Infinite Feed Gallery

---

🚀 Responsive, Animated, Aesthetic Infinite Image Feed for React
✨ Smooth scroll · 🎨 Multiple Themes · 💡 Customizable · ⚡ Production Ready

---

✨ Features

Infinite Scroll 🚀 Auto-load images on scroll	Multiple Themes 🎨 Light, Dark, Vintage, Glass	Responsive Layouts 📱 Grid, Masonry, Full-width
Lazy Loading ⚡ Load only when needed	Smooth Animations 🎭 Powered by Framer Motion	Stats Overlay 📊 Likes, views & shares on hover
Pin to Board 📌 Local save to storage	GIF Support 🎬 Cool effects on GIFs	Accessibility ♿ Keyboard & screen reader
Dark Mode 🌙 Auto or prop-driven	TypeScript 🎯 Full TS support	And More! 💥 Futuristic experiences

🙌 Special Thanks

@darshitachaurasia ✨💡🌸 🛠️ Helped fix build errors and improved test workflow.

📦 Installation

npm install react-infinite-feed-gallery
# or
yarn add react-infinite-feed-gallery

🚀 Quick Start

import { FeedScroll } from 'react-infinite-feed-gallery';
import 'react-infinite-feed-gallery/styles';

const images = [
  {
    url: 'https://example.com/image1.jpg',
    alt: 'Beautiful landscape',
    likes: 1234,
    views: 5678,
    shares: 90
  },
  // ... more images
];

function App() {
  return (
    <FeedScroll 
      images={images}
      layout="masonry"
      theme="glass"
      onReachEnd={() => console.log('Reached end!')}
    />
  );
}

🎨 Examples

Basic Usage

import { FeedScroll } from 'react-infinite-feed-gallery';

const MyGallery = () => {
  const images = [
    {
      url: 'https://picsum.photos/400/300?random=1',
      alt: 'Random image 1',
      likes: 123,
      views: 456,
      shares: 7
    },
    // ... more images
  ];

  return (
    <FeedScroll 
      images={images}
      layout="grid"
      theme="light"
    />
  );
};

Advanced Usage with Callbacks

import { FeedScroll } from 'react-infinite-feed-gallery';

const AdvancedGallery = () => {
  const handleImageClick = (image, index) => {
    console.log('Clicked image:', image, 'at index:', index);
  };

  const handlePinImage = (image) => {
    console.log('Pinned image:', image);
  };

  const handleReachEnd = () => {
    // Load more images from API
    console.log('Reached end, loading more...');
  };

  return (
    <FeedScroll 
      images={images}
      layout="masonry"
      theme="vintage"
      showStats={true}
      enablePin={true}
      enableComments={true}
      onImageClick={handleImageClick}
      onPinImage={handlePinImage}
      onReachEnd={handleReachEnd}
      pageSize={12}
      autoLoad={true}
    />
  );
};

Dark Mode with Custom Styling

import { FeedScroll } from 'react-infinite-feed-gallery';

const DarkGallery = () => {
  return (
    <FeedScroll 
      images={images}
      layout="fullwidth"
      theme="dark"
      className="custom-gallery"
      threshold={0.2}
      showStats={false}
    />
  );
};

---

📚 FeedScroll API Reference

🧩 Prop	🔠 Type	🧷 Default	📖 Description
images	ImageItem[]	Required	Array of image objects
layout	'grid' | 'masonry' | 'fullwidth'	'grid'	Layout type for gallery
theme	'light' | 'dark' | 'vintage' | 'glass'	'light'	Visual theme of the feed
loading	boolean	false	Show loading state
className	string	''	Custom CSS classes
threshold	number	0.1	Intersection observer threshold
pageSize	number	12	Images per page
autoLoad	boolean	true	Auto-load images on scroll
showStats	boolean	true	Show image stats overlay
enablePin	boolean	true	Enable pin/save feature
enableComments	boolean	false	Enable comments below images
onReachEnd	() => void	–	Callback when feed ends
onImageClick	(image, index) => void	–	Callback on image click
onPinImage	(image) => void	–	Handler when pin is clicked
onLikeImage	(image, index) => void	–	Handler when like is clicked

---

ImageItem Interface

interface ImageItem {
  url: string;           // Image URL (required)
  alt?: string;          // Alt text for accessibility
  likes?: number;        // Number of likes
  views?: number;        // Number of views
  shares?: number;       // Number of shares
  id?: string;           // Unique identifier
  title?: string;        // Image title
  description?: string;  // Image description
}

🌈 Themes & Layouts

---

🎨 Theme Showcase

Theme	Preview	Description
Light		Clean, modern look with subtle shadows and smooth edges.
Dark		Elegant and bold with glowing text on a dark canvas.
Vintage		Warm, nostalgic tones with retro-styled elements.
Glass		Frosted glass UI with backdrop blur and layered transparency.

---

📐 Layout Options

Layout Type	Preview	Description
Grid		Responsive columns (1–4) adapting to device width.
Masonry		Pinterest-style freeform layout with dynamic heights.
Fullwidth		Focused, single-column layout for full visual impact.

---

Explore and switch themes live in your app effortlessly.

🔧 Customization

Custom CSS Classes

/* Override default styles */
.feed-scroll-container {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

.image-card {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

Custom Animations

import { motion } from 'framer-motion';

// Custom animation variants
const customVariants = {
  hidden: { opacity: 0, y: 100 },
  visible: { opacity: 1, y: 0 }
};

🚀 Performance Tips

1. Optimize Images: Use WebP format and appropriate sizes
2. Lazy Loading: Images load automatically when in viewport
3. Virtual Scrolling: Only render visible images
4. Debounced Scroll: Prevents excessive API calls

🌟 Advanced Features

Pin to Board

Users can pin images to a local "board" stored in localStorage:

const handlePinImage = (image) => {
  // Image is automatically saved to localStorage
  console.log('Image pinned:', image);
};

GIF Detection

GIF images automatically get special effects:

• Pulsing glow animation
• GIF indicator badge
• Enhanced hover effects

Comments System

Enable trending comments on hover:

<FeedScroll 
  enableComments={true}
  // Comments will appear on hover
/>

🧪 Development

Install dependencies

npm install

Start development server

npm run dev

Build for production

npm run build

Type checking

npm run type-check

Linting

npm run lint

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

We welcome contributions from the community! If you have ideas, improvements, or bug fixes, follow the steps below to make your contribution count 🚀

🛠️ Steps to Contribute

1. 🍴 Fork the repository

2. 🌿 Create a branch for your feature or fix

   git checkout -b feature/your-amazing-feature

3. 💾 Commit your changes with a clear message

   git commit -m "✨ Add your amazing feature"

4. 🚀 Push to your forked repo

   git push origin feature/your-amazing-feature

5. 📬 Open a Pull Request and describe what you’ve done

---

💡 Tips for a Great PR

• Write clear, concise commit messages
• Keep your changes focused on one feature/fix
• Follow existing code style and naming conventions
• If applicable, update documentation and tests

🙌 Thank you for making this project better!

📞 Support

• 📧 Email: kaleakshay8856@gmail.com

📈 Roadmap

• Virtual scrolling for large datasets
• Image zoom on click
• Social sharing integration
• Advanced filtering options
• Custom animation presets
• Server-side rendering support
• Progressive Web App features

---

Made with ❤️ by Dev-axay18