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.

React

AWS Serverless

Bootstrap

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
showReplyToClose	boolean	flag, which shows / hides the close button over the replied to section, in edit 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.

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
coverage		coverage
src		src
.editorconfig		.editorconfig
.eslintignore		.eslintignore
.eslintrc		.eslintrc
.gitignore		.gitignore
.npmignore		.npmignore
.prettierrc		.prettierrc
.travis.yml		.travis.yml
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

superflows-dev/react-commentview

Folders and files

Latest commit

History

Repository files navigation

react-commentview

On This Page

Introduction

Use Cases

Features

Modes

View Mode

Edit Mode

Deleted Mode

Functionality

Edit Mode Functionality

View Mode Functionality

Quickstart

Before You Begin

Installation

Basic Usage

Props

AWS Related Props

Functional Props

Callback Function Props

More Use-Cases

Comment box with likes and dislikes

Comment box with voting

Editable comment box

Comment box with replied to section

Comment editor with replied to section

Customization

Night mode colors

AWS Configuration

AWS S3

AWS IAM

SDK User

MediaConvert Role

AWS MediaConvert

Tests

License

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages