@sayings/react-reels

A minimalistic Video Reels/Shorts (like Instagram Reels or Youtube Shorts) component for React (Compatiable for both Desktop and mobile screens)

Install

npm install --save @sayings/react-reels

Usage

import React from 'react'

import { Reels } from '@sayings/react-reels'
import '@sayings/react-reels/dist/index.css'

const App = () => {
  return (
    <Reels
      reels={reels}
      reelMetaInfo={reelMetaInfo}
      onMenuItemClicked={(event) => {
          console.log(event.value) 
          // other actions
      }}
      onLikeClicked={(reel) => {
          console.log(reel) // current Reel Data
          // other actions
      }}
      onDislikeClicked={(reel) => console.log(reel)}
      onCommentClicked={(reel) => console.log(reel)}
      onShareClicked={(reel) => console.log(reel)}
      onAvatarClicked={(reel) => console.log(reel)}
    />
  )
}

Props

Name	Required	Default	Description
reels	yes		Array of Objects Containing all the necessary information about each reel.
reelMetaInfo	no		Meta Details of the Reels Component such as Background colour, height, width etc.
onMenuItemClicked	no		Callback Function that is called when any of menu items is clicked (When Right Menu is used).
onLikeClicked	no		Callback Function that is called when like button is clicked (It automatically updates the count accordingly).
onDislikeClicked	no		Callback Function that is called when dislike button is clicked (It automatically updates the count accordingly).
onCommentClicked	no		Callback Function that is called when comment button is clicked.
onShareClicked	no		Callback Function that is called when share button is clicked.
onAvatarClicked	no		Callback Function that is called when Avatar is clicked.

Interfaces

1. reels: Array of Objects of type ReelsType.

   type ReelsType = {
    id: number; // unique identifier
    reelInfo: {
        url: string; // Video url
        type: string; // Type of the video
        description?: string; // Description of the video
        postedBy?: {
            avatar: string; // Image Url of Avatar 
            name: string; // Name of the uploader
        };
        likes?: {
            count: number; // number of likes
        };
        dislikes?: {
            count: number; // number of dislikes
        };;
        comments?: {
            count: number; // number of comments
        };
        shares?: {
            count: number; // number of shares
        }; 
    }
    rightMenu?: { // Right Three dot menu
        options: Array<{ // each option
            id: number; // unique identifier
            label: string; // display label
            value: string; // actual value
        }>
    };
    bottomSection?: { // If Custom Component is used for Avatar, description etc instead of default
        component: JSX.Element; // Any HTML or JSX Element
    };
}

2. reelMetaInfo: Its optional, just in case custom styling is required. Its an Object of type ReelMetaInfoType.

    type ReelMetaInfoType = {
        videoDimensions?: {
            height?: number; // height of the each reel container
            width?: number; // width of the each reel container
        },
        backGroundColor?: string; // background colour for desktop view
        borderRadius?: number; // border radius of each reel container
        likeActiveColor?: string; // like icon colour when clicked
        dislikeActiveColor?: string; // dislike icon color when clicked
    }

License

ISC © Trijit Goswami