Autocomplete is a common feature in many web forms that helps users select options from a predefined list as they type. React.js provides a powerful library called react-select that allows us to easily implement autocomplete functionality in our forms.

Installation

To get started, we need to install the react-select package. Open your terminal and run the following command:

npm install react-select

Usage

Once the installation is complete, we can import and use the Select component from react-select in our React.js form. Here’s an example of a simple form with autocomplete:

import React, { useState } from "react";
import Select from "react-select";

const Form = () => {
  const [selectedOption, setSelectedOption] = useState(null);
  const options = [
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "cherry", label: "Cherry" },
    { value: "grape", label: "Grape" },
  ];

  const handleSelectChange = (selectedOption) => {
    setSelectedOption(selectedOption);
  };

  return (
    <div>
      <Select
        value={selectedOption}
        onChange={handleSelectChange}
        options={options}
      />
    </div>
  );
};

export default Form;

In the above code, we import the Select component and use the useState hook to maintain the selected option’s state. We define an array of options with a value and label for each option. The handleSelectChange function is called when the user selects an option, updating the state with the selected option.

Finally, we render the Select component within the form, passing the value, onChange, and options props. The value prop is set to the selected option, the onChange prop is set to the handleSelectChange function, and the options prop is set to the list of options we defined.

Styling

By default, react-select provides a simple and clean default style. However, you can customize the appearance to match your application’s design. The library offers various ways to style the autocomplete component, including custom class names and CSS overrides.

Conclusion

Implementing autocomplete functionality in a React.js form is made easy with the react-select library. By following the example provided, you can create a user-friendly form that enhances the user experience and improves data entry accuracy. Happy coding!

#ReactJS #Autocomplete