react-entity-textarea

0.0.4 • Public • Published

React Entity Textarea

Provides the ability to display arbitrary entities within a textarea.

Usage

import React, { useRef, useState, useCallback } from 'react'
import EntityTextarea from 'react-entity-textarea'
 
// Import Styles
import 'react-entity-textarea/styles.css'
 
const renderEntity = (entity, opts) => (
  <strong>
    {entity.title || 'Untitled Entity'}
    {' '}
    {/* Call `opts.onDelete` to remove the current entity */}
    <span onClick={opts.onDelete}>
      ×
    </span>
  </strong>
)
 
export default function() {
  const textarea = useRef()
  const [value, setValue] = useState([['']]) // could also be null or empty string
 
  const addEntity = useCallback(e => {
    // Import to prevent deselecting the input:
    e.preventDefault()
 
    textarea.current.addEntity({ title: 'Hello, world' })
  })
 
  return(
    <div>
      <button onMouseDown={this.handleAddEntity}>
        Add Entity
      </button>
      <EntityTextarea
        ref={textarea}
        value={value}
        onChange={value => setValue(value)}
        renderEntity={renderEntity}
      />
    </div>
  )
}

Format

Values are 2-level arrays of text + entities. The top level is the blocks.

Readme

Keywords

none

Package Sidebar

Install

npm i react-entity-textarea

Weekly Downloads

5

Version

0.0.4

License

MIT

Unpacked Size

126 kB

Total Files

22

Last publish

Collaborators

  • pistonapps