React Riyils

Check out the live demo here: Demo

React Riyils is a React component for building Instagram-style vertical video stories and reels. It helps you add mobile-friendly, touch-enabled video carousels and fullscreen viewers to your web projects with ease.

Features

Features:

• Mobile-first and fully responsive
• Smooth, high-performance video playback
• Touch, mouse, and keyboard navigation
• Infinite scroll and dynamic loading
• TypeScript support
• Customizable UI and translations
• Lightweight and easy to integrate

Demo

See the live demo: Demo Page

Installation

npm install react-riyils

Usage

import { ReactRiyils, RiyilsViewer } from 'react-riyils';

const videos = [
  { id: '1', videoUrl: 'https://media.w3.org/2010/05/sintel/trailer_hd.mp4' },
  { id: '2', videoUrl: 'https://media.w3.org/2010/05/bunny/trailer.mp4' },
  // ...more videos
];

function App() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const [showViewer, setShowViewer] = useState(false);

  return (
    <>
      <ReactRiyils
        videos={videos}
        currentIndex={currentIndex}
        onVideoClick={() => setShowViewer(true)}
        onVideoChange={setCurrentIndex}
      />
      {showViewer && (
        <RiyilsViewer
          videos={videos}
          initialIndex={currentIndex}
          onClose={() => setShowViewer(false)}
          onVideoChange={setCurrentIndex}
        />
      )}
    </>
  );
}

Props

<ReactRiyils />

<RiyilsViewer />

Customization

• Translations: Pass a translations object to override default UI text.
• Styling: Use your own CSS or extend the included styles for custom look.

License

MIT

Credits

• Built with React
• Video samples from W3Schools, Google Sample Videos

For more details, see the source code and demo.