React-ghost-text NPM

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

demo

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.

ghost text inline autocomplete AI suggestions smart compose input field react component

assert lru-cache uuid

1.1.0

12 months ago

1.0.1

1 year ago

1.0.0

1 year ago