### Running ReactiveMaps Starter Project Locally Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps Provides a sequence of shell commands to clone the ReactiveMaps starter GitHub repository, navigate into it, install project dependencies using `yarn`, and start the development server to view the application locally. ```Shell git clone https://github.com/appbaseio-apps/reactivemaps-starter cd reactivemaps-starter yarn && yarn start # open http://localhost:3000 and you should see the app. # The magic sauce is inside **src/App.js** file. ``` -------------------------------- ### Install ReactiveSearch Library Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/quickstart These commands demonstrate how to install the `@appbaseio/reactivesearch` npm package using either Yarn or npm, adding it as a dependency to your project for building search UIs. ```Bash yarn add @appbaseio/reactivesearch ``` ```Bash npm install @appbaseio/reactivesearch ``` -------------------------------- ### Install Flutter Project Dependencies Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart This command fetches and installs all the declared dependencies in the `pubspec.yaml` file, making them available for use in the Flutter project. ```Shell $ flutter pub get ``` -------------------------------- ### Install react-searchbox using npm Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-searchbox/quickstart This command installs the `@appbaseio/react-searchbox` package using npm, the default package manager for Node.js. It adds the library to your project's dependencies. ```Shell npm install @appbaseio/react-searchbox ``` -------------------------------- ### Install Vue CLI globally using Yarn Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart This command installs the Vue CLI globally on your system, enabling you to create and manage Vue.js projects from the command line. ```bash yarn global add @vue/cli ``` -------------------------------- ### Example of `envs` Object with All Properties Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/search/scripts/getting-started This example illustrates a complete `envs` object, showcasing all available environment variables with sample values for various request contexts. ```JSON { index: ["products"], category: 'reactivesearch', acl: 'reactivesearch', origin: 'https://my-search.domain.com', referer: 'https://my-search.domain.com/path?q=hello', ipv4: '29.120.12.12', ipv6: '2001:db8:3333:4444:5555:6666:7777:8888', query: "sneakers", type: "search", customEvents: { platform: 'mac' }, filters: {"brand": "Puma"} } ``` -------------------------------- ### Install ReactiveSearch Module Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart These commands demonstrate how to install the `@appbaseio/reactivesearch` module, which is essential for integrating ReactiveSearch functionalities into your React application. You can choose either Yarn or npm based on your project's package manager preference. ```bash yarn add @appbaseio/reactivesearch ``` ```bash npm install @appbaseio/reactivesearch ``` -------------------------------- ### Install react-searchbox using yarn Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-searchbox/quickstart This command adds the `@appbaseio/react-searchbox` package as a dependency using yarn, an alternative package manager for JavaScript. It's often preferred for its speed and reliability. ```Shell yarn add @appbaseio/react-searchbox ``` -------------------------------- ### Install ReactiveMaps and ReactiveSearch Packages Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps These commands install the core libraries required for building map-based search UIs: @appbaseio/reactivemaps and @appbaseio/reactivesearch. Both Yarn and npm installation methods are provided to integrate these modules into your project. ```Bash yarn add @appbaseio/reactivemaps @appbaseio/reactivesearch ``` ```Bash npm install --save @appbaseio/reactivemaps @appbaseio/reactivesearch ``` -------------------------------- ### Install ReactiveSearch Searchbox and SearchBase Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbox/quickstart This snippet demonstrates how to install the `@appbaseio/searchbox` and its required dependency `@appbaseio/searchbase` using either npm or yarn. These packages are essential for building a search UI component that interacts with Elasticsearch. ```bash npm install @appbaseio/searchbox @appbaseio/searchbase // or yarn add @appbaseio/searchbox @appbaseio/searchbase ``` -------------------------------- ### Install Autocomplete Suggestions Plugin Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/autocomplete-plugin/quickstart Instructions for installing the necessary packages (`@algolia/autocomplete-js`, `@algolia/autocomplete-theme-classic`, and `@appbaseio/autocomplete-suggestions-plugin`) using either Yarn or npm. ```bash yarn add @algolia/autocomplete-js && @algolia/autocomplete-theme-classic && @appbaseio/autocomplete-suggestions-plugin ``` ```bash npm install @algolia/autocomplete-js && @algolia/autocomplete-theme-classic && @appbaseio/autocomplete-suggestions-plugin ``` -------------------------------- ### Install Searchbase Library with Yarn Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart This command installs the `@appbaseio/searchbase` package into your project using Yarn, a fast, reliable, and secure dependency management tool for JavaScript. ```Shell yarn add @appbaseio/searchbase ``` -------------------------------- ### Install ReactiveMaps and ReactiveSearch with NPM Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps This command installs the `@appbaseio/reactivemaps` and `@appbaseio/reactivesearch` packages using npm. The `--save` flag ensures that these dependencies are added to the project's `package.json` file. ```Bash npm install --save @appbaseio/reactivemaps @appbaseio/reactivesearch ``` -------------------------------- ### Create React App Boilerplate for ReactiveMaps Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps This command initializes a new React application using Create React App, providing a clean boilerplate. It then navigates into the newly created project directory, preparing the environment for installing ReactiveSearch and ReactiveMaps components. ```Bash create-react-app my-awesome-search && cd my-awesome-search ``` -------------------------------- ### Install ReactiveMaps and ReactiveSearch with Yarn Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps This command installs the `@appbaseio/reactivemaps` and `@appbaseio/reactivesearch` packages using Yarn. These libraries are essential for integrating map components and search functionalities into a React application. ```Bash yarn add @appbaseio/reactivemaps @appbaseio/reactivesearch ``` -------------------------------- ### Create New Flutter Project Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart This command initializes a new Flutter application, setting up the basic project structure and necessary files for development. ```Shell flutter create flutter_searchbox_demo ``` -------------------------------- ### Initialize React Application with Create React App Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/quickstart This command creates a new React project boilerplate using Create React App and then navigates into the newly created project directory, preparing it for development. ```Bash create-react-app my-awesome-search && cd my-awesome-search ``` -------------------------------- ### Install ReactiveSearch Vue module Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart These commands add the `@appbaseio/reactivesearch-vue` package to your project's dependencies, allowing you to use ReactiveSearch components in your Vue.js application. Both Yarn and npm options are provided. ```bash yarn add @appbaseio/reactivesearch-vue ``` ```bash npm install @appbaseio/reactivesearch-vue ``` -------------------------------- ### Complete React Application with ReactiveSearch Components Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps Presents a comprehensive React application (`App.js`) integrating `ReactiveBase`, `SingleList`, and `ReactiveGoogleMap`. This snippet showcases the full setup, including imports, `ReactiveBase` configuration with URL, app name, credentials, and map key, and the layout of the filter and map components. ```JavaScript import React, { Component } from 'react'; import { ReactiveBase, SingleList } from '@appbaseio/reactivesearch'; import { ReactiveGoogleMap } from '@appbaseio/reactivemaps; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return (
({ label: result.mag, })} />
); } } export default App; ``` -------------------------------- ### Install vue-searchbox Library Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue-searchbox/quickstart These commands demonstrate how to install the `vue-searchbox` library, which provides declarative props for querying Elasticsearch and binding UI components, using either npm or yarn package managers. ```bash npm install @appbaseio/vue-searchbox ``` ```bash yarn add @appbaseio/vue-searchbox ``` -------------------------------- ### Install ReactiveSearch Searchbox and Searchbase Libraries Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbox/Quickstart This snippet provides the commands to install the necessary `@appbaseio/searchbox` and `@appbaseio/searchbase` npm packages, which are required for building search UIs with ReactiveSearch. `searchbase` is a framework-agnostic JS library providing common utilities for search queries. ```npm npm install @appbaseio/searchbox @appbaseio/searchbase ``` ```yarn yarn add @appbaseio/searchbox @appbaseio/searchbase ``` -------------------------------- ### Install react-native-searchbox using npm Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-native-searchbox/quickstart This command installs the `@appbaseio/react-native-searchbox` package, which provides declarative props for querying Elasticsearch and binding UI components. It's the standard way to add the library to your React Native project via npm. ```Shell npm install @appbaseio/react-native-searchbox ``` -------------------------------- ### Install Searchbase Library with Yarn Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/QuickStart This command demonstrates how to add the `@appbaseio/searchbase` package to your project using Yarn, a fast, reliable, and secure dependency management tool for JavaScript. ```Shell yarn add @appbaseio/searchbase ``` -------------------------------- ### Dart SearchController Initialization and Event Handling Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase-dart/quickstart This Dart example initializes the `SearchController` to connect to an Elasticsearch index, sets up data fields, and handles user input events. It demonstrates how to update the search value, trigger queries, and subscribe to state changes to render search results dynamically in the DOM. ```Dart import 'dart:html'; import 'package:searchbase/searchbase.dart'; void main() { final index = 'gitxplore-app'; final url = 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io'; final credentials = 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61'; // Instantiate the [SearchController] final searchController = SearchController( // Elasticsearch index name index, // Appbase URL url, // Appbase credentials credentials, // Unique identifier for search widget 'search-widget', // Database fields to perform the search dataField: ['name', 'description', 'name.search', 'fullname', 'owner', 'topics'], // initial value value: '' ); // Get the input element final searchElement = querySelector('#search'); // Bind the searchController value to input value searchElement.value = searchController.value; // Update the search input value to searchController to fetch the results searchElement.addEventListener('input', (e) { // To fetch the suggestions based on the value changes searchController.setValue(e.target.value, options: Options(triggerDefaultQuery: true)); }); // Build DOM when search results update searchController.subscribeToStateChanges((change) { final results = change['results'].next; final resultsElement = querySelector('#results'); resultsElement.innerHTML = ''; results.data.forEach((element) { var node = document.createElement('li'); // Create a
  • node var resultNode = document.createTextNode(element.name); // Create a text node node.append(resultNode); // Append the text to
  • resultsElement.append(node); }); }, ['results'], ); // Fetch the default results at initial load searchController.triggerDefaultQuery(); } ``` -------------------------------- ### Complete React Application with ReactiveBase, SingleList, and ReactiveGoogleMap Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps This comprehensive code block demonstrates a full React application integrating ReactiveBase as the root component, along with SingleList for filtering and ReactiveGoogleMap for displaying search results. It shows the necessary imports, component structure, and prop configurations for a functional ReactiveSearch setup. ```JSX import ReactDOM from "react-dom/client"; import { Component } from "react"; import { ReactiveBase, SingleList } from "@appbaseio/reactivesearch"; import { ReactiveGoogleMap } from "@appbaseio/reactivemaps"; class App extends Component { render() { return (
    {item.place}
    } showMapStyles={true} renderItem={(result) => ({ custom: (
     {result.magnitude}
    ) })} />
    ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); ``` -------------------------------- ### Create a new Vue project with Vue CLI Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart This command uses the Vue CLI to create a new Vue.js project named 'my-awesome-search' and then navigates into the newly created project directory. This sets up the basic project structure. ```bash vue create my-awesome-search && cd my-awesome-search ``` -------------------------------- ### Structuring ReactiveSearch Components with Flexbox Layout Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/quickstart This example illustrates how to arrange ReactiveSearch components like `MultiList`, `SingleRange`, `SearchBox`, and `ReactiveList` within a flexible layout using CSS Flexbox, all wrapped by the `ReactiveBase` component for application-wide context. ```JSX
    ``` -------------------------------- ### Install react-native-searchbox using yarn Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react-native-searchbox/quickstart This command adds the `@appbaseio/react-native-searchbox` package to your project using yarn. It serves as an alternative to npm for package management, offering similar functionality for integrating the library. ```Shell yarn add @appbaseio/react-native-searchbox ``` -------------------------------- ### Create React App Boilerplate Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps This command initializes a new React project using Create React App (CRA) with the specified name 'my-awesome-search' and then navigates into the newly created project directory. It sets up the basic structure for a React application. ```Bash create-react-app my-awesome-search && cd my-awesome-search ``` -------------------------------- ### Flutter Searchbox API Components Overview Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart This section outlines the core API components available within the `flutter_searchbox` library, providing a high-level reference to its main building blocks for search UI development. ```APIDOC API Reference: - SearchBaseProvider - SearchWidgetConnector - SearchBox - StateProvider ``` -------------------------------- ### Example: Comprehensive SearchComponent Configuration Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchcomponent A detailed example showcasing a `SearchComponent` configured with a wide range of properties, including `appbaseConfig`, `headers`, `id`, `type`, `highlight`, `fuzziness`, `transformRequest`, `transformResponse`, and `beforeValueChange` with custom validation logic. ```JavaScript const component = new SearchComponent({ index: 'gitxplore-app', url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io', credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61', appbaseConfig: { recordAnalytics: true, enableQueryRules: true, userId: '[email\u00a0protected]', customEvents: { platform: "ios", device: "iphoneX" } }, headers: { secret: "searchbase-is-awesome", }, id: 'search-component', type: 'search', highlight: true, highlightFields: ["original_title", "original_title.raw"], value: "", fuzziness: "AUTO", searchOperators: true, queryFormat: "or", size: 10, from: 0, dataField: "original_title", includeFields: ["*"], excludeFields: [], sortBy: "asc", nestedField: "", transformRequest: (request) => Promise.resolve({ ...request, credentials: "true" }), transformResponse: response => Promise.resolve({ ...response, hits: { ...response.hits, hits: [ { _id: "promoted", _source: { original_title: "Harry potter and the cursed child" } }, ...response.hits ] } }), beforeValueChange: value => new Promise((resolve, reject) => { if(/[^a-zA-Z0-9]/.test(value)) { resolve(value) } else { reject('Special characters not allowed.') } }), }) ``` -------------------------------- ### Add Flutter Searchbox Library Dependencies Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart This YAML configuration adds `flutter_searchbox` and `searchbase` as dependencies to your Flutter project's `pubspec.yaml` file, enabling their functionalities. ```YAML dependencies: flutter_searchbox: ^4.0.0 searchbase: ^4.0.0 ``` -------------------------------- ### DataSearch Component API Reference Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart DataSearch creates a searchbox UI component that queries on specified fields. It supports weighting fields for relevance and providing a placeholder. ```APIDOC DataSearch: componentId: string (required) - A unique identifier for the component. dataField: array of objects (required) - Specifies the fields to search on with their respective weights. - field: string - The name of the field to search. - weight: number - The weight assigned to the field for relevance scoring. placeholder: string (optional) - Text displayed in the search input when empty. ``` -------------------------------- ### ReactiveBase Component API Reference Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart ReactiveBase is a provider component that allows specifying the Elasticsearch index to connect to. It acts as the root component for all other ReactiveSearch components. ```APIDOC ReactiveBase: url: string (required) - The URL of the Elasticsearch instance or appbase.io cluster. app: string (required) - The name of the Elasticsearch index or appbase.io app. credentials: string (optional) - Read-only credentials for the appbase.io app. enableAppbase: boolean (optional, default: true) - Set to false if connecting directly to an Elasticsearch service without using the appbase.io API gateway. ``` -------------------------------- ### Full Configuration Example for ReactiveSearch SearchBox (React) Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/search/searchbox Demonstrates a comprehensive usage of the ReactiveSearch `SearchBox` component, showcasing all available props and their typical configurations. This example includes data field weighting, UI customization, suggestion handling, and custom endpoint setup. ```JavaScript { // do something with the updated properties }} renderItem={(suggestion)=>{ return {suggestion.label} // custom render every suggestion item in dropdown }} renderNoSuggestion="No suggestions found" endpoint={{ url:"https://appbase-demo-ansible-abxiydt-arc.searchbase.io/recipes-demo/_reactivesearch.v3", //mandatory headers:{ // relevant headers }, method: 'POST' }} /> ``` -------------------------------- ### HTML Structure for SearchBase Components Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart This HTML snippet provides the basic DOM structure required for the JavaScript `SearchBase` example. It includes an input field for search queries, a div to display search results, and another div to render the language filter checkboxes. ```HTML
    ``` -------------------------------- ### Vue Component Configuration Properties Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue-searchbox/quickstart This snippet illustrates common configuration properties for a Vue component, likely within a ReactiveSearch context. It defines settings for triggering default and custom queries, and enabling state change tracking. ```JavaScript triggerDefaultQuery: false, triggerCustomQuery: true, stateChanges: true ``` -------------------------------- ### Initialize React Project with Create React App Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart This command sets up a new React application boilerplate using Create React App and then changes the current directory to the newly created project. It's the first step in preparing your development environment for a ReactiveSearch integration. ```bash create-react-app my-awesome-search && cd my-awesome-search ``` -------------------------------- ### ReactiveGoogleMap Component Basic Configuration Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps Illustrates the basic JSX for a `ReactiveGoogleMap` component, including its `componentId`, the `dataField` for location data, and the `react` prop to establish a dependency on the 'places' component. It also shows the `renderItem` prop for custom marker rendering. ```JSX ({ label: result.mag, })} /> ``` -------------------------------- ### Including ReactiveMaps via UMD Script Tag Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps Demonstrates how to integrate the ReactiveMaps library into a web page directly using a ` ``` -------------------------------- ### Example: Modify Response Body in `handleResponse` Script Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/search/scripts/getting-started This example illustrates how to use the `handleResponse` function to modify the Elasticsearch response body. It demonstrates adding a custom key-value pair to the response before it is returned. ```JavaScript function handleResponse() { const responseBody = JSON.parse(context.response.body); return { ...context.response, body: JSON.stringify({ ...responseBody, custom_key: 'test' }) } } ``` -------------------------------- ### Register Search Component with Object Configuration Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchbase Example of registering a search component with `SearchBase` by providing an object to configure its properties. This method allows for quick setup of components without instantiating `SearchComponent` directly. ```javascript const searchBase = new SearchBase({ index: 'gitxplore-app', url: 'https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io', credentials: 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61' }); searchBase.register('search-component', { dataField: ['title', 'description'], value: '' }); ``` -------------------------------- ### Basic Vue App Root Styling Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue-searchbox/quickstart This CSS snippet provides fundamental styling for the root application element (`#app`) in a Vue project. It sets font properties, enables anti-aliasing, centers text, and defines the primary text color. ```CSS #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } ``` -------------------------------- ### HTML Markup for Search Input and Results Display Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase-dart/quickstart This HTML snippet defines the necessary DOM elements for the search functionality: an input field for user queries and a container `div` where search results will be dynamically rendered by the associated Dart code. ```HTML
    ``` -------------------------------- ### Example: Modify Request Body in `handleRequest` Script Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/search/scripts/getting-started This example demonstrates how to use the `handleRequest` function to modify the request body. It specifically shows how to add a filter for a brand name to the Elasticsearch query before the request is made. ```JavaScript function handleRequest() { const requestBody = JSON.parse(context.request.body); return { ...context.request, body: JSON.stringify({ ...requestBody, query: [ ...requestBody.query, { id: 'brandFilter', execute: false, type: 'term', dataField: 'brand.keyword', value: 'Appbase' } ] }) } } ``` -------------------------------- ### Integrate ReactiveBase Component in React App Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps This React component snippet illustrates how to integrate the `ReactiveBase` component into your `src/App.js` file. `ReactiveBase` serves as the backend connector, allowing you to configure your Elasticsearch index, URL, credentials, and map key. The example uses an appbase.io setup for an 'earthquake' dataset, demonstrating basic configuration for connecting your ReactiveSearch application to an Elasticsearch backend. ```JavaScript import React, { Component } from 'react'; import { ReactiveBase } from '@appbaseio/reactivesearch'; class App extends Component { render() { return ( // other components will go here.
    Hello ReactiveSearch!
     ); } } ``` -------------------------------- ### Validate RangeInput Values with validateRange Callback Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/range/rangeinput The `validateRange` prop is a callback function used to validate the input range values before they are applied. It accepts an array where the first element is the start range and the second is the end range. This example demonstrates how to prevent negative values for the start range. ```JSX { if(start < 0) { return false } return end }} /> ``` -------------------------------- ### Basic Usage of TabDataList Component in React Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/list/tabdatalist Demonstrates the fundamental setup of the `TabDataList` component, showing how to define its `componentId`, `dataField`, `title`, and the `data` array for populating the tabs. This example provides a minimal configuration to get the component running. ```jsx ``` -------------------------------- ### Customizing ReactiveGoogleMap Markers with renderItem Prop Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/reactivemaps Provides an example of the `renderItem` prop's callback function for `ReactiveGoogleMap`, demonstrating how to dynamically extract and display the 'mag' property from search results as a custom label for map markers. ```JavaScript renderItem={(result) => ({ label: result.mag })} ``` -------------------------------- ### Initialize SearchBase with Full Configuration Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/searchbase Demonstrates how to create a new `SearchBase` instance, configuring various properties like index, URL, credentials, analytics, custom events, request/response transformations, and custom headers. This example showcases a comprehensive setup for the search client. ```javascript const searchbase = new SearchBase({ index: "gitxplore-app", url: "https://@arc-cluster-appbase-demo-6pjy6z.searchbase.io", credentials: "a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61", appbaseConfig: { recordAnalytics: true, enableQueryRules: true, userId: '[email protected]', customEvents: { platform: "ios", device: "iphoneX" } }, headers: { secret: "searchbase-is-awesome" }, transformRequest: (request) => Promise.resolve({ ...request, credentials: "true" }), transformResponse: response => Promise.resolve({ ...response, hits: { ...response.hits, hits: [ { _id: "promoted", _source: { original_title: "Harry potter and the cursed child" } }, ...response.hits ] } }) }) ``` -------------------------------- ### Vue SingleList Basic Usage Example Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/list/singlelist Demonstrates the minimal setup for integrating the `SingleList` component into a Vue.js application. This snippet shows how to connect the component to a specific data field and assign a title. ```Vue ``` -------------------------------- ### Flutter Searchbox API Reference Documentation Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart This entry points to the comprehensive API documentation for the `flutter_searchbox` package. It serves as the authoritative source for understanding the library's classes, methods, properties, and usage patterns, essential for developers integrating search functionalities into their Flutter applications. ```APIDOC External API Documentation for flutter_searchbox: URL: https://pub.dev/documentation/flutter_searchbox/latest/ This documentation provides details on: - Classes and their constructors - Methods and their parameters, return types - Properties and their types - Usage examples and best practices for integrating search functionality. ``` -------------------------------- ### Complete Flutter SearchBox and SearchBase Integration Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/flutter-searchbox/quickstart This code provides a full Flutter application demonstrating the integration of `flutter_searchbox` and `searchbase`. It initializes `SearchBaseProvider` with an `appbaseConfig`, sets up the main `MaterialApp`, and defines `HomePage` which includes an `AppBar` with a search icon to trigger `SearchBox` and a `SearchWidgetConnector` to display results. The `ResultsWidget` handles displaying search results and implements infinite scrolling/pagination. ```Dart import 'package:flutter/material.dart'; import 'package:searchbase/searchbase.dart'; import 'package:searchbase/src/searchcontroller.dart' as searchbase; import 'package:flutter_searchbox/flutter_searchbox.dart'; void main() { runApp(FlutterSearchBoxApp()); } class FlutterSearchBoxApp extends StatelessWidget { final searchbaseInstance = SearchBase( 'good-books-ds', 'https://appbase-demo-ansible-abxiydt-arc.searchbase.io', 'a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61', appbaseConfig: AppbaseSettings( recordAnalytics: true, userId: 'test@dev')); FlutterSearchBoxApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return SearchBaseProvider( searchbase: searchbaseInstance, child: MaterialApp( title: "SearchBox Demo", theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: HomePage(), ), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( actions: [ IconButton( icon: Icon(Icons.search), onPressed: () { showSearch( context: context, delegate: SearchBox( id: 'search-widget', enableRecentSearches: false, enablePopularSuggestions: false, showAutoFill: true, maxPopularSuggestions: 3, size: 10, dataField: [ {'field': 'original_title', 'weight': 1}, {'field': 'original_title.search', 'weight': 3} ], distinctField: 'authors.keyword', distinctFieldConfig: { 'inner_hits': { 'name': 'most_recent', 'size': 5, 'sort': [ {'timestamp': 'asc'} ], }, 'max_concurrent_group_searches': 4, }, )); }), ], title: Text('SearchBox Demo'), ), body: Center( child: SearchWidgetConnector( id: 'result-widget', dataField: 'original_title', react: { 'and': ['search-widget'], }, size: 10, triggerQueryOnInit: true, preserveResults: true, builder: (context, searchController) => ResultsWidget(searchController)), ), ); } } class ResultsWidget extends StatelessWidget { final searchbase.SearchController searchController; // Use the aliased class name ResultsWidget(this.searchController); @override Widget build(BuildContext context) { return Column( children: [ Card( child: Align( alignment: Alignment.centerLeft, child: Container( height: 20, padding: const EdgeInsets.only(left: 10.0), child: Text('${searchController.results.numberOfResults} results found in ${searchController.results.time.toString()} ms'), ), ), ), Expanded( child: ListView.builder( itemBuilder: (context, index) { WidgetsBinding.instance.addPostFrameCallback((_) { var offset = (searchController.from ?? 0) + (searchController.size ?? 0); if (index == offset - 1) { if (searchController.results.numberOfResults > offset) { searchController.setFrom(offset, options: Options(triggerDefaultQuery: true)); } } }); return Container( child: (index < searchController.results.data.length) ? Container( margin: const EdgeInsets.all(0.5), padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), decoration: BoxDecoration(border: Border.all(color: Colors.black26)), height: 200, child: Row( children: [ Expanded( flex: 3, child: Column( ``` -------------------------------- ### Integrate ReactiveGoogleMap Component for Search Results Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps This code shows the setup of a ReactiveGoogleMap component to display search results on a map. It uses `dataField` for location data, `react` to connect with other components (like SingleList), and `renderItem` for custom marker rendering. ```JSX
    {item.place}
    } showMapStyles={true} renderItem={(result) => ({ custom: (
     {result.magnitude}
    ) })} /> ``` -------------------------------- ### Configure queryFormat Property Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/list/tagcloud sets whether to show results as a union with `"or"` (default) or an intersection with `"and"`. For example, if two tags are selected, say `"Guitars"` and `"Electric Guitars"` then with a `queryFormat` of `"or"` you would get results for both the tags. With a `queryFormat` of `"and"` you would get more specific results for guitars which satisfy both the tags. ```APIDOC queryFormat: Type: String Optional: Yes ``` -------------------------------- ### Include Searchbase UMD Build via CDN Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/quickstart These script tags allow you to include the Universal Module Definition (UMD) build of `@appbaseio/searchbase` directly from a Content Delivery Network (CDN). This method is suitable for browser-based applications where you want to quickly add the library without a build step. ```HTML ``` -------------------------------- ### Integrate SingleRange Component for Ratings Filter (React) Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/v3/overview/quickstart The SingleRange component is used to create a ratings-based filter. It operates on a numeric data field, allowing specification of `start` and `end` ranges with associated `label` values via the `data` prop. The `defaultValue` prop can preselect a specific option, such as '4 stars and up'. ```JSX ``` -------------------------------- ### JavaScript: Configure Appbase Client for Promoted Results Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/autocomplete-plugin/quickstart This JavaScript snippet demonstrates how to initialize the `appbaseClientConfig` object. It includes essential settings such as the Appbase.io URL, app name, credentials, user ID, and crucially, enables `enableQueryRules` for promoted results and `recordAnalytics` for usage tracking. This configuration is vital for integrating with Appbase.io's search services. ```javascript // appbase client config object const appbaseClientConfig = { url: "https://appbase-demo-ansible-abxiydt-arc.searchbase.io", app: "best-buy-dataset", credentials: "b8917d239a52:82a2f609-6439-4253-a542-3697f5545947", settings: { userId: "s@s", enableQueryRules: true, recordAnalytics: true, }, }; ``` -------------------------------- ### Initialize ReactiveBase Component with Appbase.io Credentials Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/react/overview/reactivemaps This snippet demonstrates the initial setup of the `ReactiveBase` component in `src/App.js`. It connects to an Elasticsearch backend via appbase.io, configuring the application name ('earthquakes'), the URL with specific credentials, and a Google Maps API key. This component acts as the primary backend connector for all other ReactiveSearch components. ```JavaScript // ... other imports import { ReactiveBase } from '@appbaseio/reactivesearch'; class App extends Component { render() { return ( {/* // other components will go here. */}
    Hello ReactiveSearch!
     ); } } ``` -------------------------------- ### Include Searchbase UMD Build via CDN Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/searchbase/overview/QuickStart These HTML script tags allow you to directly load the Universal Module Definition (UMD) build of `@appbaseio/searchbase` from a Content Delivery Network (CDN). This method is suitable for browser-based applications where a module bundler is not used, making the library globally accessible. The second script tag includes the source map for debugging. ```HTML ``` -------------------------------- ### Integrate SingleRange Component for Numeric Filtering in Vue Source: https://docs.reactivesearch.io/docs/reactivesearch/vue/overview/quickstart/reactivesearch/vue/overview/quickstart This Vue template code illustrates the `single-range` component, used for implementing a range-based filter on numeric data, such as ratings. It sets the component ID, the `dataField`, a `defaultValue` for initial selection, and a `data` array that defines the start, end, and label for each selectable range option. ```Vue ```