react-simple-comment
TypeScript icon, indicating that this package has built-in type declarations

0.0.23 • Public • Published

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
}

동기

nextjs로 notion블로그화 진행중 댓글기능이 필요한데 간단한 댓글 라이브러리가 없었고 하나 만들어두면 다음 진행 프로젝트에도 재사용이 가능할 것 같다고 생각해서 시작한다

기능

v1.0.1

  • 댓글입력 기능
  • 전송 기능

to be added

  1. 댓글정렬 기능
  2. 댓글검색 기능

개발환경

  • nodejs 19.0.3

Package Sidebar

Install

npm i react-simple-comment

Weekly Downloads

0

Version

0.0.23

License

none

Unpacked Size

49.2 kB

Total Files

68

Last publish

Collaborators

  • junyoung-kim