Package Exports

react-vertical-feed
react-vertical-feed/dist/index.esm.js
react-vertical-feed/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-vertical-feed) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Vertical Feed

A React component for creating vertical video feeds similar to TikTok or Instagram. This component provides a smooth, performant way to display vertical videos with automatic play/pause based on visibility.

React Vertical Feed

Features

🎥 Automatic video play/pause based on visibility
⌨️ Keyboard navigation support
♿️ Accessibility features
📱 Mobile-friendly
🎨 Customizable loading and error states
⚡️ Performance optimized
📦 TypeScript support
🌐 Live Demo

Installation

npm install react-vertical-feed
# or
yarn add react-vertical-feed

Usage

import { VerticalFeed } from 'react-vertical-feed';

const App = () => {
  const videos = [
    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4',
    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4',
    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
    'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4',
  ];

  const items = videos.map(video => ({
    src: video,
    controls: true,
    autoPlay: true,
    muted: true,
    playsInline: true,
  }));

  const handleEndReached = () => {
    console.log('End reached');
  };

  return (
    <div className="w-full h-screen">
      <VerticalFeed items={items} onEndReached={handleEndReached} className="h-full" />
    </div>
  );
};

API Reference

Props

Prop	Type	Default	Description
`items`	`VideoItem[]`	required	Array of video items
`onEndReached`	`() => void`	-	Callback when user scrolls to the end
`loadingComponent`	`React.ReactNode`	-	Custom loading component
`errorComponent`	`React.ReactNode`	-	Custom error component
`className`	`string`	-	Additional CSS class
`style`	`React.CSSProperties`	-	Additional CSS styles
`onItemVisible`	`(item: VideoItem, index: number) => void`	-	Callback when item becomes visible
`onItemHidden`	`(item: VideoItem, index: number) => void`	-	Callback when item becomes hidden
`onItemClick`	`(item: VideoItem, index: number) => void`	-	Callback when item is clicked
`threshold`	`number`	`0.75`	Intersection observer threshold
`scrollBehavior`	`ScrollBehavior`	`'smooth'`	Scroll behavior for keyboard navigation

Types

interface VideoItem {
  src: string;
  id?: string;
  metadata?: Record<string, unknown>;
  controls?: boolean;
  autoPlay?: boolean;
  muted?: boolean;
  playsInline?: boolean;
}

Browser Compatibility

This package is compatible with all modern browsers that support:

Intersection Observer API
CSS Scroll Snap
HTML5 Video

Browser	Version
Chrome	51+
Firefox	55+
Safari	12.1+
Edge	16+
Opera	38+

Performance

The component is optimized for performance with:

Lazy loading of videos
Automatic cleanup of resources
Efficient intersection observer usage
Minimal re-renders
Optimized scroll handling

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Lint code
npm run lint

# Format code
npm run format

# Run tests
npm test

# Run tests with coverage
npm run test:coverage

Test Coverage

Test coverage reports are generated for each pull request and can be found in the GitHub Actions artifacts. To view the coverage report:

Go to the latest workflow run
Click on the "coverage-report" artifact
Download and open the index.html file in your browser

JSPM