With a lot of feedback-oriented development, ReactiveSearch v4 is in preview now. We have added components to enable richer search experiences, improved on performance, and also improved on the bundle size off the library.
You can download it for your search project with the following command:
npm install @appbaseio/reactivesearch@latest
In this blog post, I will share a summary of the key enhancements and changes included in the v4 release.
Support for React 18 😎
ReactiveSearch and ReactiveMaps are fully compatible with React 18.x and above with the 4.x releases.
Removal of search engine DSL from the library
To prevent a DoS scenario and as a security best practice, we're removing frontend DSL generation. ReactiveSearch library will instead use Reactivesearch API to declare the search intent. This will require the use of a ReactiveSearch API server and you can choose one of the two path ways to do this:
As a ReactiveSearch (previously appbase.io) customer, you already have the ReactiveSearch API server hosted in the cloud. There are no usage changes as compared to ReactiveSearch v3's usage in this scenario.
As an open-source user, you have the choice to run ReactiveSearch API server as an open-source docker container. The API server should be configured to point to a search engine: Elasticsearch, OpenSearch and Solr are currently supported.
Removal of DataSearch & CategorySearch components
Besides SearchBox component, v3.x exported two components for auto-suggestions: DataSearch & CategorySearch. 4.x removes these additional components, as the SearchBox component is versatile and allows creating a search UI with many possible options.
Richer Analytics
With v4.x, we are enabling a richer analytics experience for our users, thanks to the use of analytics.js by ReactiveSearch. Users can save searches, mark searches as favorites, tag custom events, in addition to recording search and clicks. Check out the docs to learn more
New components
Removal of Deprecated props
We have also removed the following deprecated props and instead recommend using their alternatives
| Prop Name | Component | Alternative |
analyticsConfig | ReactiveBase | reactivesearchAPIConfig |
appbaseConfig | ReactiveBase | reactivesearchAPIConfig |
analytics | ReactiveBase | reactivesearchAPIConfig.recordAnalytics |
enableAppbase | ReactiveBase | - |
triggerAnalytics | ReactiveList.renderItem | triggerClickAnalytics |
aggregationField | All Components | distinctField |
With the release of v4, the SSR implementation is more robust and easier, requiring very little config from users. 😌
Here's a SSR usage example with the new API:
import React, { Component } from 'react';
import {
getServerState
} from '@appbaseio/reactivesearch';
const components = {
};
export default class Main extends Component {
static async getInitialProps({ pathname, query }) {
return {
store: await getServerState(Main, query);
};
}
render() {
return (
<>
<ReactiveBase
{...components.settings}
initialState={props.initialState}
contextCollector={props.contextCollector}
>
{/* ... other components ...*/}
</ReactiveBase>
</>
);
}
}
The new usage mechanism takes care of a lot of configuration from the user on its own now, significantly reducing human error while writing the config.
See the new SSR usage in action with the CodeSandbox below:
💫 Additionally, you can read the docs here to know more about how ReactiveSearch provides SSR support out of the box.
Summary
We went over React v18 support, introduction of new components for TreeList and Charts, richer analytics support, low-config SSR usage support, and removal of frontend DSL generation from the library.
Take ReactiveSearch v4 for a spin and let us know your feedback on the GitHub issues.
You can follow the quickstart guide over here to build a search UI with ReactiveSearch v4.
