The Autocomplete control for React.
Demo on Codesandbox
Install it with yarn:
yarn add react-fetch-autocomplete
Or with npm:
npm install react-fetch-autocomplete
Then use it in your app:
import React from "react";
import ReactFetchAutocomplete from "react-fetch-autocomplete";
import styles from "./styles.css";
// A custom suggestion parser which should always
// return an array of objects
// containing at least a description
const suggestionParser = data =>
data.features.map(feature => ({
description: feature.place_name,
coords: feature.center
}));
const MyComponent = () => {
const [value, setValue] = useState("");
const [selection, setSelection] = useState(null);
const apiKey = "Your_API_key";
// fetchUrl is in this case a method that returns
// a URL but can also be a plain string
const fetchUrl = ({ searchQuery }) =>
`http://yourendpoint.com?someParam=${searchQuery}&api_key=${apiKey}`;
return (
<ReactFetchAutocomplete
value={value}
onChange={setValue}
onSelect={setSelection}
fetchUrl={fetchUrl}
suggestionParser={suggestionParser}
>
{({ inputProps, getSuggestionProps, suggestions, error, loading }) => {
if (error) return <div>We have an error..</div>;
return (
<div>
<input {...inputProps({ placeholder: "Search for something.." })} />
{loading && <div>Loading..</div>}
{suggestions.length > 0 && (
<div>
{suggestions.map(suggestion => (
<div {...getSuggestionProps(suggestion)}>
{suggestion.description}
</div>
))}
</div>
)}
</div>
);
}}
</ReactFetchAutocomplete>
);
};
export default MyComponent;
ReactFetchAutocomplete is a Controlled Component which uses Render Props
Prop | Type | Required | Default | Description |
---|---|---|---|---|
value |
string | ✅ | value input for the element |
|
children |
function | ✅ | Render function which handles the rendering | |
suggestionParser |
function | ✅ | A function that receives the json response and returns an array of objects which should always contain a description property | |
fetchUrl |
function/string | ✅ | function: Receives the latest searchQuery and returns a string string: a plain string |
|
onChange |
function | () => {} | onChange function for the input |
|
onSelect |
function | () => {} | When a suggestion is selected this function triggers with the current suggestion as a param | |
debounce |
number | 200 | A number in miliseconds representing the delay before a request gets fired after the last key gets pressed |
Type: string
, Required: true
Type: function
, Required: true
This method handles the rendering of your element based on the state returned by ReactFetchAutocomplete
. The function returns the following params in an object:
This function can be spread over the <input />
element. As a parameter this function accepts an object which can be given any props the input element accepts (except for value
and onChange
as these are props for the ReactFetchAutocomplete
).
<input {...getInputProps({placeholder: 'Your placeholder'})} />
This function can be spread over each suggestion item you render. As a parameter it expects the rendered suggestion and optionally an object which can be given any props you wish to be passed to the suggestion element.
suggestions.map(suggestion => (
<div {...getSuggestionItemProps(suggestion, { className: 'my-class'})}>{suggestion.description}</div>
))
This is a boolean that returns whether or not there is a request in progress.
This is a boolean that returns whether or not there has been an error.
This is an array of suggestion objecta that contain the data you passed down in the suggestionParser
.
Type: function
, Required: true
This is a function that receives the json response from the api endpoint and returns an array of objects which should contain at least a description.
const suggestionParser = data =>
data.features.map(feature => ({
description: feature.place_name,
coords: feature.center,
}));
Type: function|string
, Required: true
function: A function that accepts the current searchString as param and returns a url to the endpoint. string: a plain string containing the url.
const fetchUrl = ({ searchQuery }) =>
`http://yourendpoint.com?someParam=${searchQuery}`;
const fetchUrl = 'http://yourendpoint.com/';
Type: function
, Required: false
An event handler which can be used to update the state with the search value.
Type: function
, Required: false
An event handler which can be used to update the state incase a suggestion actually gets selected.
type: 'number', Required: false
A number in miliseconds representing the delay before a request gets fired after the last key gets pressed.