Top React Libraries — Media Queries and Autosuggest

Image for post
Image for post
Photo by Anna Pelzer on Unsplash

To make developing React apps easier, we can add some libraries to make our lives easier.

In this article, we’ll look at some popular libraries for React apps.

react-responsive

The react-responsive package can detect screen sizes based on media queries.

We can install it by running:

Then we can use it by writing:

The useMediaQuery is what we use to detect various screen sizes.

We just use a regular media query in a string to detect the sizes.

We can also use widths as breakpoints:

We detect screen sizes with the minWidth and maxWidth properties.

It’ll detect the size of the viewport automatically and display the content we want.

React Autosuggest

React Autosuggest is a autocomplete input library for React.

To use it, we can run:

to install it.

Then we can use it by writing:

We have fruits array with the suggestions.

The getSuggestions function returns the suggestion by matching the name field.

And we have the getSuggestionValue to get the name property from the suggested item.

renderSuggestion renders the suggestion entry below the input.

Then in our App component, we have the onChange function to set the value state to the state that’s entered.

onSuggestionsClearRequested clears the suggestions.

onSuggestionFetchRequested gets the suggestion according to the entered value.

We then pass in the inputProps to set the attributes of the input.

The other props are the functions that we created.

The functions or objects with the same name are passed in.

onSuggestionsFetchRequested is run as we type.

onSuggestionsClearRequested is run when we clear the input.

suggestions has the suggested items.

Once we did that, we’ll get the suggestions displayed as we type if something matches.

Image for post
Image for post
Photo by Jez Timms on Unsplash

Conclusion

react-responsive detects the size of the screen with media queries.

React Autosuggest is an autocomplete input for React apps.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store