react-textarea-mentions v0.0.3

Textarea Mentions

Install

npm i react-textarea-mentions
or
yarn add react-textarea-mentions

Demo

Usage

import { TextareaMentions, autoCursorPos } from 'react-textarea-mentions'

const textareaRef = useRef<HTMLTextAreaElement>(null)
const mentions = [
  {
    title: 'Friends',
    items: [
      {
        label: 'John',
        value: 'John',
      },
      {
        label: 'Jack',
        value: 'Jack',
      },
      {
        label: 'Tom',
        value: 'Tom',
      },
    ],
  },
]

return (
  <div className={style.exampleRoot}>
    <div className={style.box}>
      <div className={style.title}>Textarea Mentions Example</div>
      <div className={style.content}>
        <TextareaMentions
          mentions={mentions}
          onSelect={(item, caretPos) => {
            const originalContent = textareaRef.current?.value ?? ''
            if (caretPos) {
              const hasTriggerMarker = originalContent
                .slice(caretPos.start, caretPos.end + 1)
                .startsWith('/')
              if (hasTriggerMarker) {
                const leftContent = originalContent.slice(0, caretPos.start)
                const rightContent = originalContent.slice(caretPos.end + 1)

                const textareaNode = textareaRef.current
                if (textareaNode) {
                  textareaNode.value = leftContent + item.value + rightContent

                  setTimeout(() => {
                    autoCursorPos(textareaNode, leftContent.length + item.label.length, {
                      scrollIntoView: true,
                    })
                  }, 30)
                }
              }
            }
          }}
        >
          <textarea ref={textareaRef} placeholder='Type / to mention'></textarea>
        </TextareaMentions>
      </div>
    </div>
  </div>
)

Parameter Description

1. Options

2. Events

License

Apache License 2.0