https://github.com/sasi5870/react-vertical-feed
React component for smooth, vertical video feeds like TikTok or Instagram, with auto play/pause based on visibility.
https://github.com/sasi5870/react-vertical-feed
component feed instagram media react reels scroll shorts tiktok vertical video youtube
Last synced: about 2 months ago
JSON representation
React component for smooth, vertical video feeds like TikTok or Instagram, with auto play/pause based on visibility.
- Host: GitHub
- URL: https://github.com/sasi5870/react-vertical-feed
- Owner: sasi5870
- License: mit
- Created: 2025-04-15T05:15:29.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-15T07:04:09.000Z (about 2 months ago)
- Last Synced: 2025-04-15T07:24:08.014Z (about 2 months ago)
- Topics: component, feed, instagram, media, react, reels, scroll, shorts, tiktok, vertical, video, youtube
- Language: TypeScript
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 📹 React Vertical Feed
[](https://github.com/sasi5870/react-vertical-feed/releases)
## 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](#features)
2. [Installation](#installation)
3. [Usage](#usage)
4. [API Reference](#api-reference)
5. [Examples](#examples)
6. [Contributing](#contributing)
7. [License](#license)
8. [Release Notes](#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:
```bash
npm install react-vertical-feed
```
or
```bash
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:
```jsx
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 (
);
};
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
```jsx
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 (
);
};
export default App;
```
### Custom Styling
You can customize the styles of the component by passing a `style` prop:
```jsx
```
## 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](LICENSE) file for details.
## Release Notes
For the latest updates and changes, please check the [Releases](https://github.com/sasi5870/react-vertical-feed/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!