React-simple-comment NPM

react-simple-comment

Example View

Untitled

Installation

NPM

$ npm i react-simple-comment

Usage

import {BasicComment,BaseReply, replyInterface} from 'react-simple-comment'

function App() {

  const [data] = React.useState([{
    id : 1,
    name : 'jun',
    text : 'test',
    date : new Date(),
    likeCount : 0,
    dislikeCount : 2
  }, {
    id : 2,
    name : 'jun',
    text : 'test',
    date : new Date(),
    likeCount : 10 
  }] as replyInterface[])
  return (
    <div>
        <span>댓글 {data.length}개</span>
        <BasicComment 
          placeholder="댓글을 입력해주세요..."
          onSend={(text)=>{
            console.log('current text',text)
          }}
          onEnter={(text: string | undefined)=>{
            console.log('push Enter',text)
          }}
          onEscape={()=>{
            console.log('push ESC')
          }}
        />
        <div>
           {data.map((data) => 
            <BaseReply  
              onLike={(commentId)=>{
                console.log('onLike',commentId)
              }}
              onDislike={(commentId)=>{
                console.log('onDisLike',commentId)
              }}
              onReplySend={(commentId,text)=>{
                console.log('onReplySend',commentId,text)
              }}
              {...data}
            />
            )
          }

        </div>
    </div>

  );
}

export default App;

Props

export interface inputInterface {
    onInput ?: (currentText:string) => void
    placeholder ?: string
    onEmpty ?: (isEmpty:boolean) => void
    onFocus ?: (hasFocus:boolean) => void
    onKeyUp ?: (e : React.KeyboardEvent<HTMLDivElement>) => void
}

export interface buttonInterface {
    onFocus ?: (hasFocus:boolean) => void
    onClick ?: () => void
    children ?: React.ReactNode
    style ?: React.CSSProperties
}
export type commentId = number | string
export interface BaseComment {
	placeholder ?: string
	onSend ?: (text?:string) => void
	onCancel ?: () => void
    onEnter ?: (text?:string) => void
    onEscape ?: () => void
	keepButton : boolean
}
export interface replyInterface {
    id ?: commentId
    name ?: string
    text ?: string
    date ?: Date
    likeCount ?: number
    dislikeCount ?: number
    isReply :boolean
    onLike ?: (commentId ?: commentId) => void
    onDislike ?: (commentId ?: commentId) => void
    onReplySend ?: (commentId?:commentId , text?:string) => void
}

…