Floating Input
Last updated
Last updated
Add a floating input element from your extension onto the web page. You can build extensions like auto complete, ChatGPT rewrites etc..
You will get the value entered into the input box and the position of the floating element. The position is taken care of to always be visible in the view port.
Run these from your react project. cs-root, popup etc..
Install floating-ui
Add the floating input component
Copy the common directory into your react project's src directory.
Props
Example:
Checkout an example of floating-input here https://github.com/ChromeKit-Org/docs/tree/main/floating-input
| Name | Description |
|---|---|
setIsRefEleActive
Pass a state variable which will be set by the component when a input element is in focus. Use this boolean to decide to render the floating element.
floatEleRef
Ref of the floating element. This is the popup that will float next to the input element.
setFloatingStyles
State variable which will be set by the component for the position style of your floating element.
setInputWidth
State variable which will be set by the component of the width of the currently focussed input element.
setInputValue
State variable which will be set by the component with the value of the currently active input element.
