Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React autocomplete in a textarea like in an IDE (e.g. VS Code, Atom)

I try to code an auto completion feature like in the gif in React. So suggestions appear while writing text.

However all packages I could find so far work

a) only in the beginning of the input/textarea (e.g. react-autosuggest)

b) or need a trigger character (like @ or #) to open (e.g. react-textarea-autocomplete)

Do I miss some React limitation? Any hints / packages?

Auto Complete

like image 368
Obiwahn Avatar asked Oct 19 '18 15:10

Obiwahn


People also ask

How do you use Emmet in react?

To setup Emmet with React in VSCode: Go to Code (at the top of your screen), then Preferences, then Settings in VSCode. In the options on the left, select Extensions, then Emmet. Scroll to the Include Languages section, add in the item input, javascript and in the value input, javascriptreact and hit Add Item.


1 Answers

We ended up using the fantastic editor Slate.js.

The Mentions example can easily be changed so that the suggestions are triggered by any character (not only '@'). There you go: perfect auto suggest.

like image 177
Obiwahn Avatar answered Nov 15 '22 01:11

Obiwahn