1.0.2 • Published 3 years ago

@sayings/react-reels v1.0.2

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

@sayings/react-reels

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

NPM JavaScript Style Guide

Install

npm install --save @sayings/react-reels

Alt text

Alt text

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

NameRequiredDefaultDescription
reelsyesArray of Objects Containing all the necessary information about each reel.
reelMetaInfonoMeta Details of the Reels Component such as Background colour, height, width etc.
onMenuItemClickednoCallback Function that is called when any of menu items is clicked (When Right Menu is used).
onLikeClickednoCallback Function that is called when like button is clicked (It automatically updates the count accordingly).
onDislikeClickednoCallback Function that is called when dislike button is clicked (It automatically updates the count accordingly).
onCommentClickednoCallback Function that is called when comment button is clicked.
onShareClickednoCallback Function that is called when share button is clicked.
onAvatarClickednoCallback 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
    };
}
  1. 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

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.0.14

3 years ago

0.0.13

3 years ago

0.0.12

3 years ago

0.0.11

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago