react-ghost-text

React component to show ghost text suggestions in an input field (similar to VS Code or Gmail Smart Compose). Key features:

• Displays auto-complete suggestions when the user pauses typing
• Press tab to autocomplete (accept a suggestion)
• Press escape to reject a suggestion
• Caches and re-uses suggestions to avoid unnecessary calls to expensive AI services
• Typescript support for a good developer experience

Scroll down for the live demo.

Install

npm install react-ghost-text

Usage

import { AutocompleteTextbox } from 'react-ghost-text';

export default function Home() {

  // State to store the content of the textbox
  const [content, setContent] = useState<string>("");

  const getSuggestion = async (precedingText: string) => {
    // Fetch suggestion from a backend API (which may call GPT, Gemini, Claude, etc.)
    return "suggestion";
  };

  return (
    <AutocompleteTextbox
      getSuggestion={getSuggestion}
      onContentChange={content => setContent(content)} />
  )
}

Available Props

Required Props

|Prop|Description|Type| |-|-|-| |getSuggestion| A function that retrieves suggestions based on user input. Usually, this will be an API call to an AI service (e.g., OpenAI or Claude API). | function |

Optional Props

|Prop|Description|Type| |-|-|-| | value | Initial value of the textbox. | string | | debounceTime | The time to wait after the user stops typing before fetching a suggestion (in ms). Default: 1000. | integer | | suggestionClassName | The CSS class name for the span element that contains the suggestion. This is useful for styling the suggestion. Your className will override the default class name. Default: suggestion. | string | | suggestionStyle | The inline style for the span element that contains the suggestion. This is useful for styling the suggestion. Your style will override the default style. Default: {'color':'grey'}.| object | | disableAutocomplete | Disable autocomplete suggestions for the component. Default: false | boolean | | disabled | Disable editing in the component (unlike the above, this disables the textbox itself, not the suggestions). Default: false | boolean | | onSuggestionShown | An optional callback function that is called after a suggestion has been shown. | function | | onSuggestionAccepted | An optional callback function that is called when a suggestion is accepted. | function | | onSuggestionRejected | An optional callback function that is called when a suggestion is rejected. | function | | onContentChange | An optional callback function that is called when the content of the textbox changes. It is called with the current content of the textbox (as HTML string). Note: This does not include the suggestion, only the main text input by the user. | function | | Standard div props | This component accepts all standard HTML div attributes. This allows you to customize experience (e.g., disable paste by defining onPaste). | |

Live Examples

• Basic example: Renders a basic textbox with inline autocomplete.
• Advanced example: Renders a textbox with inline autocomplete and shows how to use some of the optional props.