@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 '@lydian-company/smart-input'

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

  return (
    <SmartInput
      modelId="<add yours here>"
      placeholder="Type something..."
      renderText={props => <span {...props} />}
      renderCompletion={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 @lydian-company/smart-input

yarn

yarn add @lydian-company/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 JSX.Element. You should use an inline element and splat props, like so:

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

renderCompletion: Function

Arguments: props: Any

Invoked to display completion text, returns a JSX.Element. You should use an inline element and splat props, like so:

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

multiline: Boolean (optional)

Default value: undefined

Whether or not to allow multiline text.

placeholder: String (optional)

The text to display when value is empty.