Algolia: Export React Instant Search results

user_15373625 0
Viewed 91

Is there any way to export Algolia's React Instant Search results to a CSV? I've tried using the react-csv package, but it doesn't work with Algolia's Hit Component. The package requires data as props, but the data is constantly changing since it's React Instant Search.

What I mean by constantly changing is that on page load, you're given the entire index of records found, then you can narrow down the results with the search bar or other filtering components.

I've gone down the Google rabbit hole looking for information about exporting Algolia's search results as a CSV, but I haven't found anything regarding React Instant Search—unless I completely missed it.

Has anyone tried this before? If so, could you point me in the right direction regarding documentation or examples?

react-instantsearch algolia reactjs
1 Answers

Not sure if this solves your problem but one possible way is to use the StateResults widget. The StateResults widget provides a way to access the searchState and the searchResults of InstantSearch.
Here I will create a custom StateResults component in the form of a download button and then connect it using the connectStateResults connector.

I have attached a demo below as well. For simplicity I didn't format the data to be fed into the CSV builder.

// 1. Create a React component
const StateResults = () => {
  // return the DOM output
};

// 2. Connect the component using the connector
const CustomStateResults = connectStateResults(StateResults);

// 3. Use your connected widget
<CustomStateResults />

In your case something like

const StateResults = ({ searchResults }) => {
  const hits = searchResults?.hits;
  return (
    <div>
      <button>{hits && <CSVLink data={hits}>Download CSV</CSVLink>}</button>
    </div>
  );
};

const DownloadButton = connectStateResults(StateResults);

//in your JSX then <DownloadButton />

Edit Download Algolia Results to CSV

user_135835100
Related