@foundationui/smart-input

<SmartInput>

Drop-in <input> and <textarea> replacement that that provides inline, tab-completable suggestions similar to GitHub Copilot.

The component automatically learns user inputs and makes better suggestions over time. We don't call it smart for nothing!

import { SmartInput } from '@foundationui/smart-input'

function MySmartInput() {
  const [value, setValue] = useState('')

  return (
    <SmartInput
      modelId="<add yours here>"
      placeholder="Type something..."
      renderText={props => <span {...props} />}
      renderSuggestion={props => <span style={{ opacity: 0.4 }} {...props} />}
      value={value}
      onChange={setValue}
      multiline={false}
    />
  )
}

Check out more examples or try the online editor.

Install

npm

npm install --save @foundationui/smart-input

yarn

yarn add @foundationui/smart-input

API

Props

modelId: String

The identifier of your model. Can be shared across different inputs, or unique per input.

value: String

The controlled text value of the content.

onChange: Function

Arguments: newValue: String

Invoked whenever the text value of the content changes. Use this to update the value for the controlled component.

renderText: Function

Arguments: props: Any

Invoked to display normal text, returns a React element. You should use an inline display element (e.g. span) and spread props, like so:

renderText={props => <span {...props} />}

You may add whatever styling you like like via style, className, etc.

renderSuggestion: Function

Arguments: props: Any

Invoked to display completion text, returns a React element. You should use an inline display element (e.g. span) and spread props, like so:

renderSuggestion={props => <span {...props} />}

You may add whatever styling you like like via style, className, etc.

className: string (optional)

Class name for the SmartInput wrapper div.

multiline: Boolean (optional)

Whether or not to allow multiline text.

onBlur: React.FocusEventHandler<HTMLDivElement> (optional)

Standard onBlur handler, analogous to that provided by <input> and <textarea> elements.

onFocus: React.FocusEventHandler<HTMLDivElement> (optional)

Standard onFocus handler, analogous to that provided by <input> and <textarea> elements.

onKeyDown: React.KeyboardEventHandler<HTMLDivElement> (optional)

Standard onKeyDown handler, analogous to that provided by <input> and <textarea> elements. Note that this handler is called after any keyboard events captured by <SmartInput> (e.g. Tab to accept a suggestion).

placeholder: String (optional)

The text to display when value is empty.

style: React.CSSProperties (optional)

Standard React CSS style property, applied to SmartInput wrapper div.