Enhanced textarea to achieve autocomplete functionality.

This package provides React Component to achieve GitHub's like functionality in comments regarding the textarea autocomplete. It can be used for example for emoji autocomplete or for @mentions. The render function (for displaying text enhanced by this textarea) is beyond the scope of this package and it should be solved separately.

Browsers support

IE / Edge	Firefox	Chrome	Safari	iOS Safari	Samsung	Opera
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions

Installation

This module is distributed via npm and should be installed as one of your project's dependencies:

yarn add @webscopeio/react-textarea-autocomplete

or there is UMD build available. Check out this pen as example.

This package also depends on react and prop-types. Please make sure you have those installed as well.

Props

☝️ Note: Every other props than the mentioned below will be propagated to the textarea itself

Props	Type	Description
trigger*	Object: Trigger type	Define triggers and their corresponding behavior
loadingComponent*	React Component	Gets `data` props which is already fetched (and displayed) suggestion
innerRef	Function: (HTMLTextAreaElement) => void)	Allows you to get React ref of the underlying textarea
scrollToItem	boolean \| (container: HTMLDivElement, item: HTMLDivElement) => void)	Defaults to true. With default implementation it will scroll the dropdown every time when the item gets out of the view.
minChar	Number	Number of characters that user should type for trigger a suggestion. Defaults to 1.
onCaretPositionChange	Function: (number) => void	Listener called every time the textarea's caret position is changed. The listener is called with one attribute - caret position denoted by an integer number.
movePopupAsYouType	boolean	When it's true the textarea will move along with a caret as a user continues to type. Defaults to false.
boundariesElement	string \| HTMLElement	Element which should prevent autocomplete to overflow. Defaults to body.
textAreaComponent	React.Component \| {component: React.Component, ref: string}	What component use for as textarea. Default is `textarea`. (You can combine this with react-autosize-textarea for instance)
renderToBody	boolean	When set to `true` the autocomplete will be rendered at the end of the `<body>`. Default is `false`.
onItemHighlighted	({currentTrigger: string \| null, item: string \| Object \| null}) => void	Callback get called everytime item is highlighted in the list
onItemSelected	({currentTrigger: string, item: string \| Object}) => void	Callback get called everytime item is selected
style	Style Object	Style's of textarea
listStyle	Style Object	Styles of list's wrapper
itemStyle	Style Object	Styles of item's wrapper
loaderStyle	Style Object	Styles of loader's wrapper
containerStyle	Style Object	Styles of textarea's container
dropdownStyle	Style Object	Styles of dropdown's wrapper
className	string	ClassNames of the textarea
containerClassName	string	ClassNames of the textarea's container
listClassName	string	ClassNames of list's wrapper
itemClassName	string	ClassNames of item's wrapper
loaderClassName	string	ClassNames of loader's wrapper
dropdownClassName	string	ClassNames of dropdown's wrapper

*are mandatory

Methods

The methods below can be called on the React component's ref (see: React Docs)

Methods	Description
getCaretPosition() : number	Gets the current caret position in the textarea
setCaretPosition(position : number) : void	Sets the caret position to the integer value passed as the argument
getSelectionPosition(): {selectionStart: number, selectionEnd: number}	Returns selectionStart and selectionEnd of the textarea
getSelectedText(): ?string	Returns currently selected word

Example:

import React, { Component } from "react";
import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
class App extends Component {
  onCaretPositionChange = (position) => {
    console.log(`Caret position is equal to ${position}`);
  }
  resetCaretPosition = () => {
    this.rta.setCaretPosition(0);
  }
  printCurrentCaretPosition = () => {
    const caretPosition = this.rta.getCaretPosition();
    console.log(`Caret position is equal to ${caretPosition}`);
  }
  render() {
    return (
      <div className="app">
        <div className="controls">
            <button onClick={this.resetCaretPosition}>Reset caret position</button>
            <button onClick={this.printCurrentCaretPosition}>Print current caret position to the console</button>
        </div>
        <ReactTextareaAutocomplete
          className="my-textarea"
          loadingComponent={() => <span>Loading</span>}
          trigger={{ ... }}
          ref={(rta) => { this.rta = rta; } }
          onCaretPositionChange={this.onCaretPositionChange}
        />
      </div>
    );
  }
}
export default App;

Trigger type

"{ [triggerChar: string]: {| output?: ( item: Object | string, trigger?: string ) => | {| key?: ?string, text: string, caretPosition: "start" | "end" | "next" | number |} | string | null, dataProvider: ( token: string ) => Promise