Search-textfield NPM

React Search Textfield

React component that works like a search text field, when user is typing, options will be displayed. Vanila React, no extra dependencies.

How to use it

Here is an example of implemention of the component:

function App() {
    const [value, setValue] = useState<string>("");

    return (
        <div className="App">
            <SearchTextField
                items={["Item 1", "Item 2", "Item 3"]}
                onChange={(e) => setValue(e.target.value)}
                onClickItem={(selectedItem: string) => setValue(selectedItem)}
                name={"input"}
                value={value}
                inputStyles={{ width: "200px" }}
                itemStyles={{ textAlign: "left" }}
            />
        </div>
    );
}

SearchTextField has some props that help developer to customize this component:

items: Options that user see when is typing inside the textfield. This field should be an array of strings.
onChange: This prop receive a callback that it will be executed each time user changes the value of the text field.
onClickItem: This prop receive a callback that il will be executed when user clicks on one of the options.
name: This is the name of the text field. This prop affects the value of event.target.name in the callback parameter of onChange prop.
value: It's the value of the text field.
inputStyles: This prop can override the styles of the text field. You could use an empty object if you wish.
itemStyles: This prop can override the styles of each option that will be displayed when user is typing inside the text field. You could use an empty object if you wish.