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.