Morioh
Login
Rowland Gutkowski

Rowland Gutkowski

3 years ago

When you don’t need a full-fledged Elasticsearch instance, Fuse.js provides a straightforward search solution that’s easy to integrate with React.

Fuse.js is a lightweight search engine that can run on the client side in a user’s browser. Let’s see how we can use it to easily add search functionality to a React application.

When to use Fuse.js

Search functionality is useful for many types of websites, allowing users to efficiently find what they are looking for. But why would we choose to use Fuse.js specifically?

There are many options for powering search, and perhaps the simplest is to use the existing database. Postgres has a full-text search feature, for example. MySQL does as well, and Redis has a RediSearch module.

There are also dedicated search engines, with Elasticsearch and Solr being the most popular. These require a more involved setup, but they have advanced functionality that you might need for your use case.

Lastly, you could use a search-as-a-service platform like Algolia or Swiftype. These services run their own search infrastructures. You just provide the data, configuration, and queries over an API.

You might not need the power exposed by these solutions, however, which can require a fair amount of work to implement, not to mention the cost. If you don’t have too much data to search through, Fuse.js requires minimal setup and can provide a search experience that is still much better than what you might be able to come up with yourself.

As far as how much data is too much for Fuse.js, consider that Fuse.js needs access to the entire dataset, so you’ll need to load it all on the client side. If the dataset is 100MB in size, that’s beyond what is reasonable to send to the client. But if it’s only a few kilobytes, it could be a great candidate for Fuse.js.

Building a Fuse.js + React demo application

Let’s make a basic React application that uses Fuse.js to allow the user to search for dog breeds. You can view the final result here, and the source code is available on GitHub.

#react #javascript #web-development

Using Fuse.js to Add Dynamic Search To A React App

blog.logrocket.com

Using Fuse.js to Add Dynamic Search To A React App

When you don't need a full-fledged Elasticsearch instance, Fuse.js provides a straightforward search solution that's easy to integrate with React. Fuse.js is a lightweight search engine that can run on the client side in a user’s browser. Let’s see how we can use it to easily add search functionality to a React application.

2.40 GEEK