📹 React Vertical Feed

Introduction

Welcome to the React Vertical Feed repository! This project offers a React component designed for smooth, vertical video feeds similar to those found on TikTok or Instagram. The component supports autoplay and pause functionality based on the video's visibility in the viewport. This makes it an excellent choice for creating engaging media experiences.

Table of Contents

1. Features
2. Installation
3. Usage
4. API Reference
5. Examples
6. Contributing
7. License
8. Release Notes

Features

• Smooth Scrolling: Enjoy seamless transitions as users scroll through the feed.
• Auto Play/Pause: Videos automatically play when in view and pause when out of view.
• Responsive Design: The component adapts to various screen sizes.
• Customizable: Easily tweak styles and settings to match your application's needs.
• Lightweight: Minimal impact on your application's performance.

Installation

To install the React Vertical Feed component, use npm or yarn:

npm install react-vertical-feed

or

yarn add react-vertical-feed

Usage

To use the component in your project, import it and include it in your JSX. Here's a basic example:

import React from 'react';
import VerticalFeed from 'react-vertical-feed';

const App = () => {
  const videos = [
    { id: 1, src: 'video1.mp4' },
    { id: 2, src: 'video2.mp4' },
    // Add more video sources
  ];

  return (
    <VerticalFeed videos={videos} />
  );
};

export default App;

API Reference

Props

Prop	Type	Description
videos	Array	An array of video objects. Each object should contain id and src.
autoplay	Boolean	Set to true to enable autoplay. Default is true.
pauseOnScroll	Boolean	Set to true to pause videos when scrolling. Default is true.

Examples

Basic Example

import React from 'react';
import VerticalFeed from 'react-vertical-feed';

const App = () => {
  const videos = [
    { id: 1, src: 'https://example.com/video1.mp4' },
    { id: 2, src: 'https://example.com/video2.mp4' },
  ];

  return (
    <VerticalFeed videos={videos} />
  );
};

export default App;

Custom Styling

You can customize the styles of the component by passing a style prop:

<VerticalFeed 
  videos={videos} 
  style={{ height: '100vh', backgroundColor: '#000' }} 
/>

Contributing

We welcome contributions! If you would like to help improve this project, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them.
4. Push your branch and create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Release Notes

For the latest updates and changes, please check the Releases section. Here, you can download the latest version and view detailed release notes.

---

We hope you enjoy using the React Vertical Feed component! If you have any questions or feedback, feel free to reach out. Happy coding!