Floating Input

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.

Install

Run these from your react project. cs-root, popup etc..

Install floating-ui

npm install @floating-ui/react

Add the floating input component

npx ChromeKit-Org/cli add-component floating-input

Copy the common directory into your react project's src directory.

Usage

Props

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.

Example:

Checkout an example of floating-input here https://github.com/ChromeKit-Org/docs/tree/main/floating-input