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

react-textarea-autocomplete npm
react autocomplete input
react autocomplete codepen
react-predictive text
react textarea autocomplete codepen
react-autocomplete - npm
webscopeio react textarea autocomplete npm

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?

You can try react-predictive-text

webscopeio/react-textarea-autocomplete: React , Press Ctrl + Shift + P type “ jinja ” and select “ Set Syntax: HTML(Jinja Templates) ” Sep 07, 2018 � Visual Studio Code is highly extensible and customizable. VS Code React Native extension collects usage data and sends it to Microsoft to help improve our products and services. Read our privacy statement to learn more. If you don’t wish to send usage data to Microsoft, edit VSCodeTelemetrySettings.json file at ~/.vscode-react-native and add optIn:false .

I'm actually having the same problem in regards to needing a textarea implementation, but I can help with autocomplete triggering behavior.

We have an implementation of template variables that look like this {{}} which get resolved into whatever the actual value is.

In regards to the autocompletion being triggered only on the first word, you can get around that with a couple modifications to the required functions.

For instance my required functions look like this. (not a completely working example, but all the important bits)

    const templateVars = Object.values(TemplateVarMap);

    const variables = => {
        return {
            name: templateVar,

    //This func, onChange, and onSuggestionSelected/Highlight are the important
    //parts. We essentially grab the full input string, then slice down to our 
    //autocomplete token and do the same for the search so it filters as you type
    const getSuggestions = (value) => {
        const sliceIndex = value
            .lastIndexOf('{{'); //activate autocomplete token
        const inputValue = value
            .slice(sliceIndex + 2); //+2 to skip over the {{
        const inputLength = inputValue.length;
        //show every template variable option once '{{' is typed, then filter as 
        //they continue to type
        return inputLength === 0
            ? variables
            : variables.filter(
                (variable) =>, inputValue.length) === inputValue

    const getSuggestionValue = (suggestion) =>;

    const renderSuggestion = (suggestion) => <div>{}</div>;

    onSuggestionsFetchRequested = ({ value }) => {
            suggestions: getSuggestions(value),

    onSuggestionsClearRequested = () => {
            suggestions: [],

    onChange = (event, { newValue }) => {
        //onChange fires on highlight / selection and tries to wipe
        //the entire input to the suggested variable, so if our value
        //is exactly a template variable, don't wipe it 
        if (templateVars.includes(newValue)) {
            value: newValue,

    //These both need to do similar things because one is a click selection
    //and the other is selection using the arrow keys + enter, we are essentially
    //manually going through the input and only putting the variable into the
    //string instead of replacing it outright.
    onSuggestionHighlighted = ({ suggestion }) => {
        if (!suggestion) {
        const { value } = this.state;
        const sliceIndex = value.lastIndexOf('{{') + 2;
        const currentVal = value.slice(0, sliceIndex);
        const newValue = currentVal.concat( + '}}';
        this.setState({ value: newValue });

    onSuggestionSelected = (event, { suggestionValue }) => {
        const { value } = this.state;
        const sliceIndex = value.lastIndexOf('{{') + 2;
        const currentVal = value.slice(0, sliceIndex);
        const newValue = currentVal.concat(suggestionValue) + '}}';
        this.setState({ value: newValue });

    const inputProps = {
        value: this.state.value,
        onChange: this.onChange,

    render() {
        return (

This lets me type something like This is some text with a {{ and have autocomplete pop up, upon choosing a selection it should go to This is some text with a {{}}.

The only problem here is that it requires the final two characters in the input to be {{ (or whatever your token is) for the autocomplete box to come up. I'm still playing with cursor movement and slicing the string around in different ways so if I edit a template thats not at the end the box still pops up.

Hopefully this helps.

Jinja autocomplete, The autocomplete and code check is not as powerful as the one on WebStorm VS Code is a general code/scripting IDE built to be lightweight and for people familiar When compared to modern graphical editors like Atom and Brackets ( which Shift is used to extend the selection, alt is used for alternative behavior, e.g.� Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

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.

20 best alternatives to Atom as of 2020, It also allows you to see the component's displayName in React DevTools. to allow advanced code transpilation for zero-config projects like create-react-app. TypeScript does not allow to use any plugin or transformer directly from the with another library but you also want to change the keyword (e.g. to write cool. div� TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to trans

Tooling, Browse The Most Popular 187 Atom Open Source Projects. Python syntax highlighter for Sublime Text, Atom and Visual Studio Code. Edit Chrome textareas in Atom Intelligent Kotlin support for any editor/IDE using the Language Server Autocomplete React Native / JS Styles and converting plain CSS to JS styles. Visual Studio Code is ranked 3rd while Atom is ranked 9th. The most important reason people chose Visual Studio Code is: Visual Studio Code comes fairly complete out of the box, but there are many plug-ins available to extend its functionality.

The Top 187 Atom Open Source Projects, CodeMirror is a code-editor component that can be embedded in Web pages. only the editor component, no accompanying buttons, auto-completion, or other IDE functionality. It does Having done this, an editor instance can be created like this: This could be used to, for example, replace a textarea with a real editor: atom-ternjs. JavaScript code intelligence for atom with Tern. Adds support for ES5, ES6, ES7, ES8, Node.js and more. Extendable via plugins. Uses suggestion provider by autocomplete-plus. Get started (configure your project) Open any JavaScript file from within your project; Navigate to Packages -> Atom Ternjs -> Configure project; The config

User Manual, Get code examples like "how to make a textarea unwritable in react native" js � '%s=%s' % (k, v) for k, v in params.items(), ^ SyntaxError: Generator at leastone checkbox required jquery � atom javascript es6 linter Cannot deserialize the current JSON array (e.g. [1,2,3]) into type � Cannot find module '. Code snippets. Code snippets will be in auto-completed list with suffix _snippet. Press tab to move inside snippet parameters. Syntax highlighting. Enable syntax highlighting by adding files.associations in settings.json, to associate your paths with ansible language, please see sample. Run Ansible playbook. Run Playbook in Docker

  •, this is still in development stage, but it might be what you are looking for.
  • Any luck finding a solution for your question? I am also trying to implement something similar.
  • No. Unfortunately not yet
  • I fear that is a "classic" autocomplete component like there are many, where autocompletion is only triggered for the first word.
  • I tried some stuff but can't manage to understand all and find a way, could you help me ? Do you have an code example to share ?