❤
npm
Sign UpSign In

react-commentview

1.0.63 • Public • Published

react-commentview

A responsive, reusable & customizable react component that can be used as a comment box or as a comment input. It is a pure front-end component and does not require backend coding.

NPM JavaScript Style Guide


React
AWS Serverless
Bootstrap


On This Page


Introduction

Use this flexible, customizable and reusable React component to develop user comments based functionality into your application. It is packed with functionality, keeping the basic usage simple. It is designed in Bootstrap, is responsive and renders nicely on all screen sizes. Customizable color scheme allows it to seamlessly blend in to any UI. It depends on AWS serverless technologies for certain functionalities such as uploading and processing attachments. However, it is a pure front-end component and does not need backend coding.

Back To Top ▲


Use Cases

Possible usage of this component includes but is not limited to the following use-cases:

  • Development of a chat / group chat / messenger module
  • Development of a web based forum module
  • Development of a social network
  • Development of a topic-based commenting / discussion module
  • Development of a user reviews module
  • Development of a user feedback module
  • Development of a contact us module

and many more.

Back To Top ▲


Features

  • Reusable - It can be integrated easily into your react application, in any place, where a comment input or comment display, is required. It allows multiple instances on a single page.
  • Responsive - UI is designed in bootstrap, is fully responsive and renders nicely on all screen sizes.
  • Customizable - The color scheme of this component is customizable. It can be changed to blend in with any UI.
  • Pure Front-end - This is a pure front-end react component and backend coding is not required. For certain functionalities that need a backend, AWS configuration is required and is explained in the subsequent sections.

Back To Top ▲


Modes

This component has three operating modes - view mode, edit mode and deleted mode. For setting the mode during initial render, a prop is used. As the user interacts with the component further, the component can switch from one mode to other. This behaviour can be controlled by setting the props.


View Mode

In view mode the comment text is displayed along with other enabled decorations, such as likes, votes, etc.



Edit Mode

In edit mode, the component functions as a comment editor. Edit mode can be used for accepting new comments as well as editing existing comments. User can provide text, image, pdf and video as inputs. For uploading attachments such as images, pdfs and video, this component depends on AWS. Backend coding is not necessary. Only AWS configuration is required.



Deleted Mode

Deleted mode looks like the image below.

Back To Top ▲


Functionality

This component provides the following functionality:


Edit Mode Functionality

  • Text Input - Auto-resizable text area component to accept textual input
  • Emoji Support - More than 1100 standard emojis are available to choose from
  • Image Upload - Supports image attachments (preview & cropping integrated)
  • PDF Upload - Supports pdf attachments (preview integrated)
  • Video Upload - Supports video attachments (preview, thumbnail generation & video start-end clipping integrated)

View Mode Functionality

  • Likes - Allow users to like
  • Dislikes - Allow users to dislike
  • Votes - Allow users to upvote or downvote
  • Share - Allow users to share
  • Reply - Allow users to reply to any particular comment
  • Replied To - Show the source comment summary, to which the current comment is a reply to

Back To Top ▲


Quickstart

Read this section to get started with the implementation. You can use this component in view, edit and delete modes. This section will help you get started with the basic usage. After you become familiar, you can move on to explore props, further features and customization.


Before You Begin


Install Dependencies

This module depends on the following packages. Install them first.

npm install --save aws-sdk
npm install --save bootstrap
npm install --save react-bootstrap
npm install --save react-bootstrap-icons
npm install --save react-ui-components-superflows
npm install --save react-ui-themes-superflows
npm install --save react-upload-to-s3
  • AWS SDK is used for uploading attachments such as images, pdfs and videos.
  • Bootstrap is the framework, which this component uses for design and layouting
  • UI Components contains some specially designed components (developed by us) that are used by this component
  • UI Themes contains some specially designed themes (developed by us) that are used by this component
  • Upload To S3 is developed by us and used to process attachments and to upload them to aws

AWS Configuration

Following AWS services are used by this component:

  • IAM for access credentials and permissions
  • S3 for attachment storage
  • MediaConvert for video attachment processing

The configuration section will help you in your AWS setup.


Installation

npm install --save react-commentview

Basic Usage

Same component can be reused in multiple ways, simply by using various combination of props. Three very basic use-cases are covered in this section.

  • Showing a simple editor
  • Showing a comment
  • Showing a deleted comment

After you become familiar with these use-cases, you can move on to studying the props and then understanding the subsequent use-cases.


As a simple editor

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                bucket="your_bucket"
                awsRegion="your_aws_region"
                awsKey="your_aws_key"
                awsSecret="your_aws_secret"
                awsMediaConvertEndPoint="https://<endpoint_prefix>.mediaconvert.<region>.amazonaws.com"
                mediaConvertRole="mediaconvert_role"
                cdnPrefix="your_cdn_prefix"
                mode="edit"
                preventEditToView={true}
                clearOnSubmit={true}
                callbackInfo={{id: 22}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                onSubmit={(result) => {console.log('submit result', result);}}
                theme={theme}
                onSubmit={(result) => {console.log('submit result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

To display a comment

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                bucket="your_bucket"
                awsRegion="your_aws_region"
                awsKey="your_aws_key"
                awsSecret="your_aws_secret"
                awsMediaConvertEndPoint="https://<endpoint_prefix>.mediaconvert.<region>.amazonaws.com"
                mediaConvertRole="mediaconvert_role"
                cdnPrefix="your_cdn_prefix"
                mode="view"
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!', attachment: {object: 'http://superflows.dev/234232344.mp4', type: 'video'}}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onReplied={(result) => {console.log('reply result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

To display a deleted comment

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                mode="deleted"
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Back To Top ▲


Props

Use the table below to understand the props and how they can be set to customize the appearance and behaviour of this component.


AWS Related Props

Please refer to the AWS configuration section to know how to obtain your values for these props.

Prop Type Description
bucket string name of your s3 bucket where attachments will be uploaded
awsRegion string name of the aws region where s3 bucket is hosted
awsKey string aws access key (recommended that it should be stored in environment variables)
awsSecret string aws secret (recommended that it should be stored in environment variables)
awsMediaConvertEndPoint url string aws media convert endpoint
mediaConvertRole string name of aws media convert role
cdnPrefix url string prefix in case your s3 bucket is behind a cdn

Functional Props

Prop Type Description
mode string mode of render, should be either of "view", "edit" and "deleted"
preventEditToView boolean flag, which is enables / disables the edit mode from going to view mode after submit
clearOnSubmit boolean flag, which enables / disables clearing the editor after submit, in edit mode
edited boolean flag, which shows / hides the 'Edited' decorator, in view mode
showCancel boolean flag, which shows / hides the Cancel button on the editor, in edit mode
showEdit boolean flag, which shows / hides the edit button, in view mode
showDelete boolean flag, which shows / hides the delete button, in view mode
showLikes boolean flag, which enables / disables the like button & functionality, in view mode
showDisLikes boolean flag, which enables / disables the dislike button & functionality, in view mode
showVotes boolean flag, which enables / disables the voting functionality, in view mode
showShare boolean flag, which shows / hides the share button, in view mode
iHaveLiked boolean flag, which sets / unsets whether the current user has liked, in view mode
iHaveDisLiked boolean flag, which sets / unsets whether the current user has disliked, in view mode
iHaveUpVoted boolean flag, which sets / unsets whether the current user has upvoted, in view mode
iHaveDownVoted boolean flag, which sets / unsets whether the current user has downvoted, in view mode
likes number number of likes, in view mode
disLikes number number of dislikes, in view mode
upVotes number number of upvotes, in view mode
downVotes number number of downvotes, in view mode
callbackInfo json object any json object can be provided, which is passed back by all callback functions
replyTo json object any json object representing a comment to which the current comment is a reply, should follow the template {userName: "Sneha G", text: "Hey buddy!"}
user json object any json object representing the current user, should follow the template {id: 2, name: "Hrushi M", picture: "picture_url", timestamp: "1660215594"}
theme theme object superflows theme object

Callback Function Props

Prop Type Description
onSubmit callback gets invoked after user submits, in edit mode
onDelete callback gets invoked after user deletes, in view mode
onLiked callback gets invoked after user likes, in view mode
onLikeRemoved callback gets invoked after user removes like, in view mode
onDisLiked callback gets invoked after user dislikes, in view mode
onDisLikeRemoved callback gets invoked after user removes dislike, in view mode
onReplied callback gets invoked after user clicks on reply, in view mode
onShared callback gets invoked after user clicks on share, in view mode
onUpVoted callback gets invoked after user upvotes, in view mode
onUpVoteRemoved callback gets invoked after user removes upvote, in view mode
onDownVoted callback gets invoked after user downvotes, in view mode
onDownVoteRemoved callback gets invoked after user removes downvotes, in view mode
onReplyTo callback gets invoked after user clicks on the source comment, in view mode
onReplyToClosed callback gets invoked after user closes / removes the reply to section, in edit mode

Back To Top ▲


More Use-Cases


Comment box with likes and dislikes

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                mode="view"
                showLikes={true}
                showDisLikes={true}
                iHaveLiked={true}
                likes={5}
                disLikes={10}
                callbackInfo={{id: 22}}
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!'}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onLiked={(result) => {console.log('liked result', result);}}
                onLikeRemoved={(result) => {console.log('like removed result', result);}}
                onDisLiked={(result) => {console.log('liked result', result);}}
                onDisLikeRemoved={(result) => {console.log('dislike removed result', result);}}
                onReplied={(result) => {console.log('reply result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Comment box with voting

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                mode="view"
                showVotes={true}
                iHaveUpVoted={true}
                upVotes={25}
                downVotes={10}
                callbackInfo={{id: 22}}
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!'}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onUpVoted={(result) => {console.log('upvoted result', result);}}
                onUpVoteRemoved={(result) => {console.log('upvote removed result', result);}}
                onDownVoted={(result) => {console.log('downvoted result', result);}}
                onDownVoteRemoved={(result) => {console.log('downvote removed result', result);}}
                onReplied={(result) => {console.log('reply result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Editable comment box

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                bucket="your_bucket"
                awsRegion="your_aws_region"
                awsKey="your_aws_key"
                awsSecret="your_aws_secret"
                awsMediaConvertEndPoint="https://<endpoint_prefix>.mediaconvert.<region>.amazonaws.com"
                mediaConvertRole="mediaconvert_role"
                cdnPrefix="your_cdn_prefix"
                mode="view"
                showEdit={true}
                showDelete={true}
                showCancel={true}
                showVotes={true}
                iHaveUpVoted={true}
                upVotes={25}
                downVotes={10}
                callbackInfo={{id: 22}}
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!'}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onSubmit={(result) => {console.log('submit result', result);}}
                onDelete={(result) => {console.log('delete result', result);}}
                onReplied={(result) => {console.log('reply result', result);}}
                onShared={(result) => {console.log('share result', result);}}
                onUpVoted={(result) => {console.log('upvoted result', result);}}
                onUpVoteRemoved={(result) => {console.log('upvote removed result', result);}}
                onDownVoted={(result) => {console.log('downvoted result', result);}}
                onDownVoteRemoved={(result) => {console.log('downvote removed result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Comment box with replied to section

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                bucket="your_bucket"
                awsRegion="your_aws_region"
                awsKey="your_aws_key"
                awsSecret="your_aws_secret"
                awsMediaConvertEndPoint="https://<endpoint_prefix>.mediaconvert.<region>.amazonaws.com"
                mediaConvertRole="mediaconvert_role"
                cdnPrefix="your_cdn_prefix"
                mode="view"
                showEdit={true}
                showDelete={true}
                showVotes={true}
                iHaveUpVoted={true}
                upVotes={25}
                downVotes={10}
                replyTo={{userName: "Sneha G", text: "Hey buddy!"}}
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!'}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onSubmit={(result) => {console.log('submit result', result);}}
                onDelete={(result) => {console.log('delete result', result);}}
                onReplied={(result) => {console.log('reply result', result);}}
                onShared={(result) => {console.log('share result', result);}}
                onUpVoted={(result) => {console.log('upvoted result', result);}}
                onUpVoteRemoved={(result) => {console.log('upvote removed result', result);}}
                onDownVoted={(result) => {console.log('downvoted result', result);}}
                onDownVoteRemoved={(result) => {console.log('downvote removed result', result);}}
                onReplyTo={(result) => {console.log('reply to result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Comment editor with replied to section

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                bucket="your_bucket"
                awsRegion="your_aws_region"
                awsKey="your_aws_key"
                awsSecret="your_aws_secret"
                awsMediaConvertEndPoint="https://<endpoint_prefix>.mediaconvert.<region>.amazonaws.com"
                mediaConvertRole="mediaconvert_role"
                cdnPrefix="your_cdn_prefix"
                mode="edit"
                showEdit={true}
                showDelete={true}
                showVotes={true}
                iHaveUpVoted={true}
                upVotes={25}
                downVotes={10}
                replyTo={{userName: "Sneha G", text: "Hey buddy!"}}
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!'}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onSubmit={(result) => {console.log('submit result', result);}}
                onDelete={(result) => {console.log('delete result', result);}}
                onReplied={(result) => {console.log('reply result', result);}}
                onShared={(result) => {console.log('share result', result);}}
                onUpVoted={(result) => {console.log('upvoted result', result);}}
                onUpVoteRemoved={(result) => {console.log('upvote removed result', result);}}
                onDownVoted={(result) => {console.log('downvoted result', result);}}
                onDownVoteRemoved={(result) => {console.log('downvote removed result', result);}}
                onReplyTo={(result) => {console.log('reply to result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Back To Top ▲


Customization

Appearance customization can be done by modifying the theme object that is passed as a prop. Customizable properties of this component are listed below.

  • commentViewBorderColor
  • commentViewBackgroundColor
  • commentViewUserColor
  • commentViewReplyToBackgroundColor
  • commentViewReplyToTitleColor
  • commentViewColor
  • commentViewDecorationColor
  • commentViewDecorationHighlightColor
  • uploadToS3BackgroundColor

Before passing the theme object as prop to the component, you can change these colors as you wish so that component blends in perfectly in your user interface.


Night mode colors

This example demonstrates how the theme object can be utilized to change the color scheme to night mode.

import React from 'react'

import { Col, Row, Container } from 'react-bootstrap';
import { CommentView } from 'react-commentview'
import Themes from 'react-ui-themes-superflows'
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => {

  const theme = Themes.getTheme("Default");
  theme.commentViewBorderColor = '#dddddd'
  theme.commentViewBackgroundColor = '#000000'
  theme.commentViewUserColor = '#ffffff'
  theme.commentViewColor = '#dddddd'
  theme.commentViewReplyToBackgroundColor = '#222222';
  theme.commentViewReplyToTitleColor = '#cccccc';
  theme.commentViewDecorationColor = '#ff0000';
  theme.commentViewDecorationHighlightColor = '#00ff00';
  theme.uploadToS3BackgroundColor = '#efefef'

  return (

    <Container className='mt-5'>
      <Row className='justify-content-center'>
        <Col sm={12} xs={12} md={6} xxl={6} >
            <CommentView 
                bucket="your_bucket"
                awsRegion="your_aws_region"
                awsKey="your_aws_key"
                awsSecret="your_aws_secret"
                awsMediaConvertEndPoint="https://<endpoint_prefix>.mediaconvert.<region>.amazonaws.com"
                mediaConvertRole="mediaconvert_role"
                cdnPrefix="your_cdn_prefix"
                mode="view"
                showEdit={true}
                showDelete={true}
                showVotes={true}
                iHaveUpVoted={true}
                upVotes={25}
                downVotes={10}
                replyTo={{userName: "Sneha G", text: "Hey buddy!"}}
                preFill={{id: 10, text: 'Hello how are you doing? Hoping that things are going good at your end. Lets catchup soon, have something to discuss!'}}
                user={{id: 2, name: "Hrushi M", picture: "https://image.shutterstock.com/mosaic_250/2780032/1714666150/stock-photo-head-shot-portrait-close-up-smiling-confident-businessman-wearing-glasses-looking-at-camera-1714666150.jpg", timestamp: "1660215594"}}
                theme={theme}
                onSubmit={(result) => {console.log('submit result', result);}}
                onDelete={(result) => {console.log('delete result', result);}}
                onReplied={(result) => {console.log('reply result', result);}}
                onShared={(result) => {console.log('share result', result);}}
                onUpVoted={(result) => {console.log('upvoted result', result);}}
                onUpVoteRemoved={(result) => {console.log('upvote removed result', result);}}
                onDownVoted={(result) => {console.log('downvoted result', result);}}
                onDownVoteRemoved={(result) => {console.log('downvote removed result', result);}}
                onReplyTo={(result) => {console.log('reply to result', result);}}
            />
        </Col>
      </Row>
    </Container>

  );
  
}

export default App

Back To Top ▲


AWS Configuration

AWS S3

  • Create an S3 bucket via the AWS admin console, say name of the bucket is myuploads
  • Set the bucket policy as follows
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*"
            ],
            "Resource": [
                "arn:aws:s3:::myuploads",
                "arn:aws:s3:::myuploads/*"
            ]
        }
    ]
}
  • Set the cors policy as follows
[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE",
            "GET"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

AWS IAM

SDK User

  • Create an SDK user via the AWS console so that you get access to aws region, aws access key and aws secret, i.e. aws credentials.
  • Ensure that you preserve these credentials in a secure manner.
  • It is especially important that these credentials be stored in the environment files and should never be pushed to a source repository such as git.
  • For this SDK user, give create, add, edit, delete permissions to your S3 bucket via the AWS console. I usually give full access restricted to a particular bucket, like the one which we created in the S3 section above.
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:*",
                "s3-object-lambda:*"
            ],
            "Resource": "arn:aws:s3:::myuploads"
        }
    ]
}
  • For this SDK user, then give the user access to AWS mediaconvert via the AWS console. I have used AWSElementalMediaConvertFullAccess, which is a pre-created AWS policy for this. To find and attach this policy - Select your IAM user > Click add permissions on the user summary screen > Click attach existing policies directly > Search mediaconvert > Apply the AWSElementalMediaConvertFullAccess policy

MediaConvert Role

  • Goto IAM > Roles
  • Select AWS Service as the trusted entity type
  • Choose MediaConvert from the services dropdown
  • Click next on add permissions
  • Name the role as per your choice. I have named it mediaconvert_role. (Remember that this role name has to be given as a prop to the upload-to-s3 component, refer to the Usage section)

AWS MediaConvert

AWS mediaconvert is required for video processing. The clip selection happens at the client end, whereas the actual clipping is done by an AWS mediaconvert job. This requires a region specific endpoint and can be easily obtained from the aws cli (aws commandline).

aws mediaconvert describe-endpoints --region <region>

Remember that this region specific endpoint also has to be provided as a prop to the upload-to-s3 component. (Refer to the Usage Section)

Once you are through with installing the dependencies and the AWS configuration, using the component becomes fairly simple. Please refer to the Usage below.


Tests

PASS src/index.test.js (77.093s)

  • ✓ CommentView: Render of blank edit mode (1068ms)
  • ✓ CommentView: Render of prefilled edit mode without attachment (1015ms)
  • ✓ CommentView: Render of prefilled edit mode with attachment (1029ms)
  • ✓ CommentView: Render of prefilled view mode without attachment, edit and delete (1013ms)
  • ✓ CommentView: Render of prefilled view mode with attachment and without edit and delete (1021ms)
  • ✓ CommentView: Render of prefilled view mode with attachment and with edit and delete (1023ms)
  • ✓ CommentView: Render of Uploader (12074ms)
  • ✓ CommentView: Render of Emoji picker (6454ms)
  • ✓ CommentView: Switching from View Mode To Edit Mode (4052ms)
  • ✓ CommentView: Render Likes (11075ms)
  • ✓ CommentView: Render Votes (11077ms)
  • ✓ CommentView: Text input interaction submit button (3108ms)
  • ✓ CommentView: Text input interaction enter key (3030ms)
  • ✓ CommentView: Text input interaction enter key clearOnSubmit (3030ms)
  • ✓ CommentView: Edit mode to view mode switch (3019ms)
  • ✓ CommentView: Edit mode to view mode switch with prefilled text revert (4022ms)
  • ✓ CommentView: Render of prefilled view mode with attachment and with edit and delete (6040ms)
File % Stmts % Branch % Funcs % Lines Uncovered Line #s
All files 78.27 66.91 76.67 78.32
CommentView.js 78.89 67.65 75.86 78.95 ... 62,724,774,809
Constants.js 100 100 100 100
Util.js 69.57 41.67 100 69.57 ... 33,37,44,45,49
index.js 0 0 0 0
---------------- ---------- ---------- ---------- ---------- -------------------
Test Suites: 1 passed, 1 total
Tests: 17 passed, 17 total
Snapshots: 0 total
Time: 78.601s
Ran all test suites.

License

MIT © superflows-dev

Readme

Keywords

Package Sidebar

Install

npm i react-commentview

Repository

github.com/superflows-dev/react-commentview

Homepage

github.com/superflows-dev/react-commentview#readme

Weekly Downloads

6

Version

1.0.63

License

MIT

Unpacked Size

302 kB

Total Files

7

Last publish

Collaborators

  • superflows-dev
Try on RunKit
Report malware