Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@foundationui/smart-input

Package Overview
Dependencies
Maintainers
1
Versions
100
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@foundationui/smart-input

Smart input/textarea component for React. Learns to provide inline, tab-completeable suggestions.

  • 1.0.11
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
135
increased by1025%
Maintainers
1
Weekly downloads
 
Created
Source

<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.

FAQs

Package last updated on 04 Jan 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc