React, React Native and Vue UI components for building data-driven apps with Elasticsearch

Overview

reactivesearch
Reactive Search

UI components library for Elasticsearch: Available for React, Vue and React Native

Read how to build an e-commerce search UI

a.) with React, b.) with Vue or c.) with React Native.


web vue native


Gitter npm PRs Welcome Mentioned in Awesome React Mentioned in Awesome Elasticsearch


Check out the ReactiveSearch marketplace at reactiveapps.io.


Banner Image showing all the web UI components we offer

Web designer templates for sketch.

Banner Image showing all the mobile UI components we offer

iOS and Android designer templates for sketch.


TOC

  1. ReactiveSearch: Intro
  2. Features
  3. Component Playground
  4. Live Examples
  5. Comparison with Other Projects
  6. Installation
  7. Docs Manual
  8. Contributing
  9. Other Projects You Might Like

1. ReactiveSearch: Intro

ReactiveSearch is an Elasticsearch UI components library for React and React Native. It has 25+ components consisting of Lists, Ranges, Search UIs, Result displays and a way to bring any existing UI component into the library.

The library is conceptually divided into two parts:

  1. Sensor components and
  2. Actuator components.

Each sensor component is built for applying a specific filter on the data. For example:

  • A SingleList sensor component applies an exact match filter based on the selected item.
  • A RangeSlider component applies a numeric range query based on the values selected from the UI.
  • A DataSearch component applies a suggestions and search query based on the search term typed by the user.

Sensor components can be configured to create a combined query context and render the matching results via an actuator component.

ReactiveSearch primarily comes with two actuators: ResultCard and ResultList. ResultCard displays the results in a card interface whereas ResultList displays them in a list. Both provide built-in support for pagination and infinite scroll views. Besides these, the library also provides low level actuators (ReactiveComponent and ReactiveList) to render in a more customized fashion.


2. Features

Design

  • The sensor / actuator design pattern allows creating complex UIs where any number of sensors can be chained together to reactively update an actuator (or even multiple actuators).
  • The library handles the transformation of the UI interactions into database queries. You only need to include the components and associate each with a DB field.
  • Built in live updates - Actuators can be set to update results even when the underlying data changes in the DB.
  • Comes with scoped and styled components. Doesn't require any external CSS library import, comes with className and innerClass support.
  • Is themable via ThemeProvider.

Ease of Use

🆕 ReactiveSearch API: Secure your ElasticSearch Queries

Based on a popular request, we have implemented support for a declarative API based on ReactiveSearch. The API is called ReactiveSearch API. It moves the query DSL generation logic to a backend system (an appbase.io service) instead of exposing it directly on the client-side. By strictly enabling only ReactiveSearch API use, you can also prevent script injections.

The main advantages of using it over the ElasticSearch Query DSL are:

  • Query generation happens on the server-side - addressing the primary security concern around query injection.
  • Easy recording of analytics events for search and clicks. Read more
  • Application of query rules and functions for search queries. Read more

Using ReactiveSearch API instead of ElasticSearch's query DSL is an opt-in feature. You need to set the enableAppbase prop as true in your ReactiveBase component. This assumes that you are using appbase.io for your backend.

We recommend checking out this KitchenSink App that demonstrates the use of the ReactiveSearch API for all the ReactiveSearch components.

Back to Top


3. Component Playground

Try the live component playground at playground. Look out for the knobs section in the playground part of the stories to tweak each prop and see the effects.


4. Live Demos

A set of live demos inspired by real world apps, built with ReactiveSearch.

Web

You can check all of them on the examples section of website.

Mobile

  • Booksearch on Play Store: A booksearch app showing a searchable collection of over 10k books built with ReactiveSearch. Also available as a snack.
  • Gitxplore on Play Store: A Github repository explorer app to search over the 25k+ most popular github repos.
  • ReactiveTodos on App Store: A shared collaborative to-do list app to showcase the capability of Reactivesearch.

Back to Top


5. Comparison with Other Projects

Here, we share how ReactiveSearch compares with other projects that have similar aims.

# ReactiveSearch SearchKit InstantSearch
Backend Any Elasticsearch index hosted on any Elasticsearch cluster. Any Elasticsearch index hosted on any Elasticsearch cluster. Custom-built for Algolia, a proprietary search engine.
Development Actively developed and maintained. Active issue responses, some development and maintenance. Actively developed and maintained.
Onboarding Experience Starter apps, Live interactive tutorial, getting started guide, component playground, every component has a live working demo with codesandbox. Getting started tutorial, no live component demos, sparse reference spec for many components. Starter apps, getting started guide, component playground.
Styling Support Styled and scoped components. No external CSS import required. Rich theming supported as React props. CSS based styles with BEM, not scoped to components. Theming supported with SCSS. CSS based styles, requires external style import. Theming supported by manipulating CSS.
Types of Components Lists, Ranges, Search, Dates, Maps, Result Displays. Can use your own UI components. Lists, Ranges, Search*, Result*. Can't use your own UI components. (Only one component for Search and Result, resulting in more code to be written for customizability) Lists, Range, Search, Result. Can use your own UI components.
Supported Distribution Platforms React, Vue for Web, React Native for mobile. React for Web. React, Vue, Angular, vanilla JS for Web, React Native for mobile but latter has no UI components.

We welcome contributions to this section. If you are building a project or you know of another project that is in the similar space, let us know and we will update the comparisons.

Back to Top


6. Installation

Installing ReactiveSearch is just one command.

  • If you're using reactivesearch for web
npm install @appbaseio/reactivesearch

You can check out the quickstart guide with React here.

  • If you're using reactivesearch for mobile (native)
npm install @appbaseio/reactivesearch-native

You can check out the quickstart guide with React Native here.


7. Docs Manual

The official docs for the Web library are at docs.appbase.io/docs/reactivesearch/v3.

The components are divided into four sections:

Docs for React Native version of the library are available at docs.appbase.io/docs/reactivesearch/native.

Back to Top


8. Contributing

Please check the contribution guide.


9. Other Projects You Might Like

  • arc API Gateway for ElasticSearch (Out of the box Security, Rate Limit Features, Record Analytics and Request Logs).

  • searchbox A lightweight and performance focused searchbox UI libraries to query and display results from your ElasticSearch app (aka index).

    • Vanilla - (~16kB Minified + Gzipped)
    • React - (~30kB Minified + Gzipped)
    • Vue - (~22kB Minified + Gzipped)
  • dejavu allows viewing raw data within an appbase.io (or Elasticsearch) app. Soon to be released feature: An ability to import custom data from CSV and JSON files, along with a guided walkthrough on applying data mappings.

  • mirage ReactiveSearch components can be extended using custom Elasticsearch queries. For those new to Elasticsearch, Mirage provides an intuitive GUI for composing queries.

  • ReactiveMaps is a similar project to Reactive Search that allows building realtime maps easily.

  • appbase-js While building search UIs is dandy with Reactive Search, you might also need to add some input forms. appbase-js comes in handy there.

Back to Top

Issues
  • Support for Signed Requests / AWS Elasticsearch

    Support for Signed Requests / AWS Elasticsearch

    For services like AWS Elasticsearch, all requests needed to be signed and the signature added to the headers (at least for some configurations in AWS).

    Is there any way to specify custom headers on a per request base? While I still have a proxy for my requests, I am depending on AWS to verify security, which works fine if I can sign the request.

    Thanks

    opened by csepulv 29
  • Add SSR support for reactivesearch

    Add SSR support for reactivesearch

    Issue Type:

    Reactive Base component have server side rendering issues, it tries to uses the window which will not be available on the server. Description:

    I have been giving it a try and found that the Reactive Base component does have a server side rendering issues, it tries to uses the window which will not be available on the server. Not sure if other components have similar issues, but it would be great if all of the components have SSR support. I got it working by rendering it only on the client side but that's a bad practice and is not recommended.

    Screenshots:

    Minimal reproduction of the problem with instructions:

    Reactivesearch version: 2.2.0

    Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

    Anything else:

    bug enhancement 
    opened by mrtinkz 24
  • DynamicRangeSlider is not working properly.

    DynamicRangeSlider is not working properly.

    In DynamicRangeSlider "RangeLabel" props is working, but I want to it shows me only 2 or 3 decimal digits. It Shows me all the decimal digit after decimal point that's why I can not show the $ sign in my Label. And also issue in RangeSelection my product's maximum range is 39.45 but the slider is set 39 that's why I can not show the my last product. And another thing in DynamicRangeSlider is if my product range is 0-10 $ then slider is set to 0-9 $ and I can not show my products which price is grater than 9 $ and less than 10 $.

    enhancement 
    opened by ashwini987 20
  • Load data on initial load

    Load data on initial load

    I have implemented the same code which you have given in Snack, but in my app it is showing blank screen with search bar

    Using on React Native

    I want to load some data on the screen when I load it for the first time, before user start searching for the tutors. screenshot at oct 06 16-08-21 screenshot at oct 06 16-09-00

    Dependancies: "dependencies": { "@appbaseio/reactivesearch-native": "^0.9.0", "@expo/videoplayer": "^0.4.0", "axios": "^0.18.0", "dateformat": "^3.0.3", "expo": "^30.0.0", "firebase": "^5.5.1-0", "native-base": "^2.8.0", "prop-types": "^15.6.2", "react": "^16.3.1", "react-bootstrap-sweetalert": "^4.4.1", "react-data-fetching": "^0.2.3", "react-dom": "^16.5.2", "react-native": "https://github.com/expo/react-native/archive/sdk-30.0.0.tar.gz", "react-native-animatable": "^1.3.0", "react-native-atoz-listview": "0.0.7", "react-native-awesome-alerts": "^1.1.1", "react-native-calendars": "^1.20.0", "react-native-keyboard-aware-scroll-view": "^0.7.2", "react-native-modal": "^6.5.0", "react-native-modal-datetime-picker": "^6.0.0", "react-native-read-more-text": "^1.1.0", "react-native-render-html": "^3.10.0", "react-native-search-box": "0.0.19", "react-native-search-filter": "^0.1.4", "react-native-star-rating": "^1.1.0", "react-native-sweet-alert": "^1.1.0", "react-native-view-more-text": "^2.0.1", "react-navigation": "2.0.1", "sweetalert-react": "^0.4.11", "video-react": "^0.13.0"

    bug good first issue :wave: native :iphone: 
    opened by vishalnathani17 20
  • FeatureRequest: The ability to have multiple sorts per sortOption

    FeatureRequest: The ability to have multiple sorts per sortOption

    Issue Type: Enhancement

    Description: My apologies if this already exists in some way; if it does I could not find it.

    I'm looking for a way to have more advanced sort options. Specifically, the ability for a sortOption to support multiple sorts, executed in the order declared.

    For example, suppose we wanted two search options, Best Match which sorts by the relevance score, and Rating which sorts by the rating field and secondarily sorts by the relevance score.

    Here's a crude mockup:

    <ResultCard
        react={{
            "and": ["PriceFilter", "SearchFilter"]
        }}
        onData={this.onData}
        sortOptions={[
            {
                label: "Best Match",
                dataField: "_score",
                sortBy: "desc"
            },
            {
                label: "Rating",
                and: {[
                    {
                        dataField: "rating",
                        sortBy: "desc"
                    },
                    {
                        dataField: "_score",
                        sortBy: "desc"
                    }
                ]}
        }]
    />
    

    This feature request applies to all the result components: ResultList, ResultCard, and ReactiveList.

    ElasticSearch sort docs

    wontfix 
    opened by davidklebanoff 18
  • Cursor jumps to end of input when inputValue is changed when using DataSearch

    Cursor jumps to end of input when inputValue is changed when using DataSearch

    Hi , I am using Datasearch Component . Whenever I try to modify the search value (lets say change the middle character) , the cursor position is going to the end of the input . I guess its rerendering every time .

    Pls suggest a fix .

    I tried the demo sandbox example for datasearch and I face the same issue there .

    <DataSearch componentId="searchbox" dataField={["title"]} fieldWeights={[3]} placeholder="Search" autosuggest={false} highlight={true} />

    bug web :spider_web: 
    opened by Arvind6353 17
  • Custom sorting component with ReactiveList

    Custom sorting component with ReactiveList

    Issue Type: Question

    Platform: Web

    Description: I am currently trying to build complex sorting component and since there is not enough documentation on it I have to ask here. I will split the question in two parts.

    1. Using the default sortOptions of the ReactiveList result component, there is a problem with result relevance. To be more precise, if I set default value to the sort and then try typing something in the search component, the results will still be sorted by default sort value instead by relevance. Is there a way to avoid this with the default sortOptions provided by Reactive Search? So to have ie. SingleDropdownList component to change the current sorting of the elements in the ReactiveList?

    2. I tried to create and put CustomSort inside ReactiveComponent. The code for it is

    <ReactiveComponent
      key="componentSort"
      componentId="ComponentSort"
    >
      <CustomSort sortData={sortOptions} />
    </ReactiveComponent>
    

    CustomSort component has setQuery which gets triggered on button click (there are multiple sortOptions).

    setValue(value) {
      this.props.setQuery({
        "query": {
          "match_all": {}
        },
        "sort": {
          value: {"order": "desc"}
        }
      });
    }
    

    Query is completely the same as the one being sent by default sortOptions (when checked in dev tools). However query does not update Reactive List component (ReactiveList has custom sort component in react). Should I have defaultQuery even if I do not want to set default sort? Is this the proper way to set up the custom sort?

    Great project btw. Much more customizations available compared to SearchKit.

    Screenshots: N/A

    Reactivesearch version: 2.6.12

    Browser: All

    wontfix 
    opened by NemanjaTck 17
  • Cannot read property '0' of undefined Error with a transformed URL Query

    Cannot read property '0' of undefined Error with a transformed URL Query

    Affected Projects React

    Library Version: 3.4.3

    Describe the bug If you want to change _msearch to _search as seen in the documentation (https://docs.appbase.io/docs/reactivesearch/v3/overview/reactivebase/#props in transformRequest) it has an Problem with the Structure of the Body, because of the {"preference":"queryResult"}. If you remove that part from the Body it throws the following error TypeError: Cannot read property '0' of undefined at query.js:1 at Array.forEach () at handleResponse (query.js:1) at query.js:1

    To Reproduce You can Reproduce the Error in the Following Sandbox in App.js Line 40: https://codesandbox.io/s/gitxplore-app-qmjdn

    Expected behavior In My Expactation i Should atleast become an Answer from the Server, which i would log with the help of the transformResponse function, but before the Request is send or at the moment the Result is incoming the Error happens.

    bug 
    opened by PascalStehling 17
  • enable pagination during SSR

    enable pagination during SSR

    Issue Type: enhancement

    Platform: Web

    Description:

    For me, the main idea behind SSR is to make web app crawlable (including dummy crawlers, which do not execute javascript).

    So, for testing purposes I fired your demo packages/web/examples/ssr, disabled javascript in the browser and navigated to localhost:3000.

    First page renders just fine, but pagination buttons do not function at all until I enable js back. It would be nice, if pagination buttons work without js and with URLParams enabled in ResultCard

    Reactivesearch version: dev branch

    Browser: all

    opened by aol-nnov 15
  • Feature Request: allow GraphQL instead of Elasticsearch

    Feature Request: allow GraphQL instead of Elasticsearch

    Issue Type: enhancement
    Platform: both Web and Native

    Description:
    This is a great library with a rich set of filter/facet widgets and a mechanism to add your own. I'd like to use it with other backends besides elasticsearch and it seems graphql might be a way to support a variety of backends.

    Have you ever considered adding graphql as an option for the underlying queries?

    idea :thinking: wontfix 
    opened by csepulv 15
  • build(deps-dev): bump react-native from 0.59.10 to 0.62.3

    build(deps-dev): bump react-native from 0.59.10 to 0.62.3

    Bumps react-native from 0.59.10 to 0.62.3.

    Release notes

    Sourced from react-native's releases.

    v0.62.3

    This patch release is specifically targetted towards Xcode 12.5. The changes done are tailored to unblock developers still relying on v0.62 of RN.

    Aside from bumping your version from 0.62.2 to 0.62.3, please make sure to add this line to your podfile (or modify it if you already had it):

    use_flipper!('Flipper' => '0.75.1', 'Flipper-Folly' => '2.5.3', 'Flipper-RSocket' => '1.3.1')
    

    After which, do all the classic necessary cleans (node_modules, caches, pod folders, etc)(react-native-clean-project is your ally) then do yarn install and a pod install --repo-update (if pod install fails on an error about a Flipper package, just remove the relevant lines from the podfile.lock and run the pod install again).

    The only other commit picked & released along the Xcode 12.5 fixes is:

    • Update validateBaseUrl to use latest regex (commit) which fixes CVE-2020-1920, GHSL-2020-293.

    To help you upgrade to this version, you can use the upgrade helper ⚛️


    You can find the whole changelog history over at react-native-releases.

    v0.62.2

    This release fixes a few minor issues that were reported by the community. You can view the complete changelog here.

    You can participate in the conversation for the next patch release in the dedicated issue.


    To help you upgrade to this version, you can use the new upgrade helper ⚛️


    You can find the whole changelog history over at react-native-releases.

    v0.62.1

    This release fixes a YellowBox regression in v0.62.0 where the Flipper network inspector causes YellowBox to crash the app due to using base64 images.

    You can view the complete changelog here.

    You can participate in the conversation for the next patch release in the dedicated issue.


    To help you upgrade to this version, you can use the new upgrade helper ⚛️


    You can find the whole changelog history over at react-native-releases.

    ... (truncated)

    Commits
    • 83425fa [0.62.3] Bump version numbers
    • c6f4611 [local] change autolink to match requirements for FlipperFolly working with X...
    • c4ea556 [local] change podfile to rely on the autolink-ios rb file
    • ca09ae8 Update validateBaseUrl to use latest regex
    • 166a5dd Get ReactiveNative compiled with Clang 10 (#28362)
    • 158b558 [local] update detox to work on Xcode 12
    • b9944e5 [0.62.2] Bump version numbers
    • f89c509 Make Vibration.vibrate compatible with TurboModules (#27951)
    • 8858d87 Exclude all FlipperKit transitive dependencies from iOS Release builds (#28504)
    • 4fd9c9d Fix Appearance module when using Chrome Debugger
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • [Bug] searchAsMove feature doesn't work when set defaultQuery

    [Bug] searchAsMove feature doesn't work when set defaultQuery

    • Using ReactiveOpenStreetMap or ReactiveGoogleMap.
    • set defaultQuery option in props
    const mapProps = {
            dataField: 'location',
            showSearchAsMove: true,
            searchAsMove: true,
            renderAllData: (hits, streamHits, loadMore, renderMap, renderPagination) => {
                
            },
            defaultQuery: () => ({
                sort: sortQuery,
            })
    };
    <ReactiveGoogleMap componentId="googleMap" {...mapProps} />
    

    After that: i move on the map, the response of in 'renderAllData function' (hits) always is 10 records. No matter where in the map.

    Version: "@appbaseio/reactivemaps": "^3.0.0-beta.11", "@appbaseio/reactivesearch": "3.12.7",

    Anyone can help me. Many thanks!

    bug 
    opened by trongquyvn 0
  • ToggleButton When Used as Child Component is Removed from SelectedValues

    ToggleButton When Used as Child Component is Removed from SelectedValues

    Affected Projects React

    Library Version: 3.20.0

    Describe the bug

    Trying to use ToggleButton as a child component of ReactiveList. The initial query is fired and properly executed in most cases but then unable to reset the filter. Therefore, it only appears in SelectedFilters for a second before being removed.

    To Reproduce https://codesandbox.io/s/charming-thompson-nzxet?file=/src/index.js:1941-2526

    Steps to reproduce the behavior:

    1. Create ReactiveList with render method
    2. Render ToggleButton component within ReactiveList render method

    Expected behavior Goal is to keep ToggleButton state in selectedValues and be able to unset the state via SelectedFilters once enabled

    Screenshots

    Desktop (please complete the following information):

    OS: OSX Catalina Browser: Firefox Developer Ed Version: Latest

    opened by rollinsb1010 1
  • ToggleButton should not unselect active item - There should always be an item active

    ToggleButton should not unselect active item - There should always be an item active

    Affected Projects VueJS

    Is your feature request related to a problem? Please describe. ToggleButton unselects value when clicked on active item

    Describe the solution you'd like ToggleButton should not unselect value when clicked on active item. It should only change the active item when clicked on that active item

    Describe alternatives you've considered Not considered. But could be a custom reactive component.

    Additional context Could be a prop to have different behavior in case you want to continue to offer this option in both ways

    Steps to reproduce

    1. Initial state: image

    2. Change active item: image

    3. Click active item (same item as step 2) - Undesired behavior image

    4. Click active item (same item as step 2) - Desired behavior / Stays the same image

    enhancement 
    opened by larsdouweschuitema 1
  • Vue 3

    Vue 3

    Affected Projects Vue.js

    Describe the solution you'd like Vue 3 is every day reaching a level of stability and support from the community that will be hard to ignore in the near future. My suggestion is to start discussing how we are going to tackle this. Migration steps are documented here (https://v3.vuejs.org/guide/migration/introduction.html#overview).

    There is a lot of paths we can take, so I will leave this as broad as possible to foster the discussion.

    enhancement 
    opened by jpsc 5
  • Fix/focus shortcuts pr issues

    Fix/focus shortcuts pr issues

    **Issues Addressed: ** : $ Extra padding when showIcon is set to false and iconPosition is right. $$ InputRef is breaking for existing users in Vue and React.

    Libraries Affected:

    • ReactiveSearch - vue : DataSearch

    Loom $

    Notion Link

    Docs PR Link

    Note:

    This PR is the follow-up of #1724, refer for further features' description.

    opened by mohdashraf010897 0
  • Add a resetDefault prop to SelectedFilters components to reset filters back to their default values

    Add a resetDefault prop to SelectedFilters components to reset filters back to their default values

    Affected Projects VueJS

    Is your feature request related to a problem? Please describe. Using "clearValues" prop on SelectedFilters components does not take into account the "defaultValue" set on each individual component.

    Describe the solution you'd like A "resetDefault" prop so that you can decide whether to completely reset using "clearValues" or resetting back to defaults.

    Describe alternatives you've considered Writing custom functionality to set the state. But this was quickly stated bad practice because of bad syncing with appbase components in special the StateProvider.

    Additional context Default values set on component image

    Default values before clear image

    After clear > All values are empty/nothing/0 image

    enhancement 
    opened by larsdouweschuitema 1
  • IOS bug when selecting an item from suggestion list

    IOS bug when selecting an item from suggestion list

    Affected Projects

    React

    Library Version: x.y.z

    "version": "3.18.0",

    Describe the bug

    Selecting an item from the suggestion list on a IOS devices such as an iPad/iPhone almost never works (9/10 times). It seems like the

  • element is not entirely selectable, except when selecting the element, however, not even this works all the time. Sometimes when I try to select te highlighted word it simply closes the list but does not continue to the next page.

    From what I can figure is that when selecting an item from the suggestion list "onValueSelected" is rarely running. But, when it does it continues to the page while having a 'cause' or 'source (I can't recall which one it was) which is undefined.

    The code base uses the onChange event handler in order to update the value, however, I've noticed that the onSelect would be a viable option as well in the Downshift library. Perhaps, with the JS code base on IOS devices uses a strict mode that it ain't a 100% valid event to handle this action.

    To Reproduce

    Steps to reproduce the behavior:

    import { DataSearch } from '@appbaseio/reactivesearch';
    import { SEARCH_FIELDS, FIELD_WEIGHTS } from '../../config/defaults';
    
    const SearchFieldGlobal = () => {
    	return (
    		<DataSearch
    			componentId="q"
    			autosuggest={ true }
    			dataField={ SEARCH_FIELDS }
    			fieldWeights={ FIELD_WEIGHTS }
    			debounce={ 100 }
    			fuzziness={ 2 }
    			highlight={ false }
    			type="search"
    			URLParams={ false }
    			className="searchfield-global"
    			innerClass={ {
    				input: 'searchbar__input',
    			} }
    			onValueSelected={ ( value, cause, source ) => {
    				if ( 'ENTER_PRESS' === cause ) {
    					document.location.href = `/search?q="${ value }"`;
    				}
    
    				if ( 'SEARCH_ICON_CLICK' === cause ) {
    					document.location.href = `/search?q="${ value }"`;
    				}
    
    				if ( 'SUGGESTION_SELECT' === cause ) {
    					document.location.href = source.permalink;
    				}
    			} }
    			placeholder="Typ om te zoeken..."
    			parseSuggestion={ ( suggestion ) => {
    				return {
    					label: suggestion.source.post_title,
    					source: suggestion.source,
    				};
    			} }
    			showIcon={ true }
    			iconPosition={ 'right' }
    			icon={ <i className="fal fa-search h5" aria-hidden="true"></i> }
    		/>
    	);
    };
    export default SearchFieldGlobal;
    

    Expected behavior

    same as desktop/android devices to go straight to the right page when selecting the item

    Smartphone (please complete the following information):

    • Device: iPhone X
    • OS: IOS 14.6
    • Browser safari
    bug 
  • opened by Yard-Daniel 0
  • ReactiveComponent re renders custom component within render props

    ReactiveComponent re renders custom component within render props

    Affected Projects React

    Library Version: x.y.z ^3.18.1

    Describe the bug When utilizing ReactiveComponent and rendering a custom component in render prop. ReactiveComponent re renders numerous number of times causing performance issues.

    To Reproduce https://codesandbox.io/s/reactive-component-re-renders-ynqth?file=/src/index.js In a small code sandbox implementation, the sandbox console outputs the re rendered value within the render props.

    Within a bare bones implementation in production environment the component is rendered more than 200 times. Expected behavior The component in render props should only be rendered once than multiple times.

    Screenshots image image

    Desktop (please complete the following information):

    • OS: [Windows 10]
    • Browser: [Chrome ]
    • Version [90.0.4430.212 ]

    Smartphone (please complete the following information): N/A

    Additional context N/A

    bug 
    opened by aoloo 1
  • [DateRange] Support quick option daterange

    [DateRange] Support quick option daterange

    Affected Projects React

    Is your feature request related to a problem? Please describe.

    I am using DateRange to request data by time range. I want choose useful timerange: last 15 minute, last 1 hour, last 24h...

    Describe the solution you'd like Support add quick options time range: last 15 minute, last 1 hour, last 24h, This week... Support config disable custom range picker (only show quick options)

    Additional context Screen Shot 2021-05-27 at 3 14 45 PM Screen Shot 2021-05-27 at 3 16 03 PM

    enhancement 
    opened by kenzoname 0
Releases(v1.19.0-vue)
  • v1.19.0-vue(Jul 19, 2021)

    Features

    • Add support for a convenient way to define dataField with weights in search components. The dataField property can be defined as an object or an array of objects with field and weight keys. @bietkul https://github.com/appbaseio/reactivesearch/commit/11bc1ff64d2ad32f7d5f73907a895fc364e326af

    Bug Fixes

    • Fix theming issues when themePreset is set to dark @bietkul https://github.com/appbaseio/reactivesearch/commit/a1ce902e177aac90320a97806396a63708ce5122

    • Fix reactivecore error when node version < 14.17.1 @bietkul appbaseio/[email protected]

    Source code(tar.gz)
    Source code(zip)
  • v3.21.0(Jul 19, 2021)

    Features

    • Add support for a convenient way to define dataField with weights in search components. The dataField property can be defined as an object or an array of objects with field and weight keys. @bietkul https://github.com/appbaseio/reactivesearch/commit/11bc1ff64d2ad32f7d5f73907a895fc364e326af
    Source code(tar.gz)
    Source code(zip)
  • v3.20.2(Jul 14, 2021)

    Bug Fixes

    • Fix reactivecore error when node version < 14.17.1 @bietkul https://github.com/appbaseio/reactivecore/commit/4687225d754e40ef54e93203a3d87215ce1bf0f6
    • Fix controlled behavior in MultiList component when selectAllLabel is being used @bietkul https://github.com/appbaseio/reactivesearch/commit/6c69bb69a8c14103053f4fa72f544529f830beef
    Source code(tar.gz)
    Source code(zip)
  • v1.18.0-vue(Jul 13, 2021)

    Features

    • Add enableStrictSelection prop to toggle-button @mohdashraf010897 (#1737)

    Bug Fixes

    • Voice search, issues with suggestions dropdown @mohdashraf010897 (#1733)
    Source code(tar.gz)
    Source code(zip)
  • v3.20.0(Jul 13, 2021)

    Features

    • Add enableStrictSelection prop to toggle-button @mohdashraf010897 (#1737)

    Bug Fixes

    • Voice search, issues with suggestions dropdown @mohdashraf010897 (#1733)
    Source code(tar.gz)
    Source code(zip)
  • v1.17.0-vue(Jul 1, 2021)

    Features

    • Add support for resetToDefault prop in SelectedFilters component. It is helpful to set the component values to the defaultValue prop on ClearAll action. @mohdashraf010897 (#1725)

    Changes

    • Fix pagination issues in ReactiveList when URLParams is disabled @bietkul https://github.com/appbaseio/reactivesearch/commit/a781356629fc3508322a1a30267935e92164579b
    Source code(tar.gz)
    Source code(zip)
  • v1.16.0-vue(Jun 25, 2021)

    Features

    • Add support for index prop in all components. It is useful to query multiple indices in a single Appbase request. @anik-ghosh-au7 (#1697)
    • Add support for aggregationSize prop in list components to control the size of aggregations. @bietkul
    • Add more diacritics @lakhansamani https://github.com/appbaseio/reactivecore/pull/103

    Bug Fixes

    • Fix Icon alignment issues for search components @mohdashraf010897 (#1659)
    • Render no results message when option are not found @anik-ghosh-au7 (#1668)
    • Fix suggestions parsing logic for fields that have dot(.) in its name @bietkul https://github.com/appbaseio/reactivecore/commit/f093c0e7e402b5191e2f8d7e12e6cb5c2b63060b
    • Fix pagination issues with ReactiveList @bietkul https://github.com/appbaseio/reactivesearch/issues/1661
    Source code(tar.gz)
    Source code(zip)
  • v3.19.0(Jun 25, 2021)

    Features

    • Add support for index prop in all components. It is useful to query multiple indices in a single Appbase request. @anik-ghosh-au7 (#1696)
    • Add support for aggregationSize prop in list components to control the size of aggregations. @bietkul
    • Improved diacritics support @lakhansamani https://github.com/appbaseio/reactivecore/pull/103

    Bug Fixes

    • Fix Icon alignment issues for search components @mohdashraf010897 (#1659)
    • Fix suggestions parsing logic for fields that have dot(.) in its name @bietkul https://github.com/appbaseio/reactivecore/commit/f093c0e7e402b5191e2f8d7e12e6cb5c2b63060b
    • Fix pagination issues with ReactiveList @bietkul https://github.com/appbaseio/reactivesearch/commit/b17c2e7adc40554f217de3022101180df5674159
    Source code(tar.gz)
    Source code(zip)
  • v1.15.2-vue(Jun 7, 2021)

    Bug Fixes

    • Fix enableStrictSelection for render method @bietkul https://github.com/appbaseio/reactivesearch/commit/565df6cbebeb803efa95fcb2b0cfb31c6bebb1c3
    Source code(tar.gz)
    Source code(zip)
  • v1.15.1-vue(Jun 7, 2021)

  • v1.15.0-vue(Jun 3, 2021)

  • v3.18.1(May 27, 2021)

    Bug Fixes

    • The name attribute changed to displayName for components @anik-ghosh-au7 (#1666)
    • Fix the logic to extract the dataFields from source object when dataField property is not defined in search components @bietkul https://github.com/appbaseio/reactivecore/commit/e1e4253a8b5dd93fa6dd3bca6e190d83ab038782
    Source code(tar.gz)
    Source code(zip)
  • v1.14.1-vue(May 4, 2021)

  • v1.14.0-vue(May 3, 2021)

    Features

    • Add support to display distinct results with the help of distinctField and distinctFieldConfig props in search and result components @anik-ghosh-au7 (#1654)

    Bug Fixes

    • Fix predictive suggestions parsing logic to support some edge cases @bietkul https://github.com/appbaseio/reactivecore/commit/8db0856552b397c5fac38e8e4addec094c160f0e
    Source code(tar.gz)
    Source code(zip)
  • v3.18.0(May 3, 2021)

    Features

    • Add support to display distinct results with the help of distinctField and distinctFieldConfig props in search and result components @anik-ghosh-au7 (#1654)

    Bug Fixes

    • Fix predictive suggestions parsing logic to support some edge cases @bietkul https://github.com/appbaseio/reactivecore/commit/8db0856552b397c5fac38e8e4addec094c160f0e
    Source code(tar.gz)
    Source code(zip)
  • v1.13.0-vue(Apr 10, 2021)

    Features

    • Add icons for recent & popular searches in search components @anik-ghosh-au7 (#1635)

    Bug Fixes

    • Fix parsing logic for predictive suggestions when the query has spaces @anik-ghosh-au7 (#1640)
    Source code(tar.gz)
    Source code(zip)
  • v1.13.1-vue(Apr 21, 2021)

    Features

    • Add support to customize pagination prev/next label @royduin (#1650)

    Bug Fixes

    • Add support for tree shaking @bietkul https://github.com/appbaseio/reactivesearch/commit/95cea1fad182180fbc6d8feb1ce3b9772439aaba
    Source code(tar.gz)
    Source code(zip)
  • v3.17.0(Apr 10, 2021)

    Features

    • Add icons for recent & popular searches in search components @anik-ghosh-au7 (#1635)

    Bug Fixes

    • Fix parsing logic for predictive suggestions when the query has spaces @anik-ghosh-au7 (#1640)
    Source code(tar.gz)
    Source code(zip)
  • v3.16.2(Mar 22, 2021)

    Bug Fixes

    • RS API: Fix value parsing logic for list components where value could be an object type. It was causing the recording of incorrect values for filters. @bietkul https://github.com/appbaseio/reactivecore/commit/164c9e10a21140ff85f621c902b29d44b2934f0c
    Source code(tar.gz)
    Source code(zip)
  • v1.12.1-vue(Mar 9, 2021)

    Bug Fixes

    • Call onValueSelected callback in search components when filter value is cleared @bietkul https://github.com/appbaseio/reactivesearch/commit/90ec4cf07c71e9b5b77c7c4c58935ba7661abb6c
    Source code(tar.gz)
    Source code(zip)
  • v3.16.1(Mar 8, 2021)

    Bug Fixes

    • Call onValueSelected callback in search components when filter value is cleared @bietkul https://github.com/appbaseio/reactivesearch/commit/90ec4cf07c71e9b5b77c7c4c58935ba7661abb6c
    Source code(tar.gz)
    Source code(zip)
  • v3.16.0(Mar 1, 2021)

    Features

    • Add support for enableRecentSearches prop to display recent searches as default suggestions in search components @bietkul https://github.com/appbaseio/reactivesearch/commit/f0523061ee29e53b892c2651797e68e127d65280

    Bug Fixes

    • Fix an issue with ClearAll action in selected filters that removes external params from the URL @anik-ghosh-au7 (#1619)
    • Fix infinite scrolling in the result components when total_hits value is greater than the actual number of documents returned by a particular query. @bietkul https://github.com/appbaseio/reactivesearch/commit/301dc662fac02a22d2b78f38468e739874375470
    Source code(tar.gz)
    Source code(zip)
  • v1.12.0-vue(Feb 22, 2021)

    Features

    • Add support to track impressions for search results. @bietkul https://github.com/appbaseio/reactivesearch/commit/897501c1f97862fadb1c3a694814650656f2c7a1
    • Add aggregationSize prop in components that support aggregationField to control the aggregations size. @bietkul https://github.com/appbaseio/reactivesearch/commit/fa8bb5071eb5b0c4624cdf1c4cea7c6e6548960a
    Source code(tar.gz)
    Source code(zip)
  • v3.15.0(Feb 19, 2021)

    Features

    • Add aggregationSize prop in components that support aggregationField to control the aggregations size. @bietkul https://github.com/appbaseio/reactivesearch/commit/fa8bb5071eb5b0c4624cdf1c4cea7c6e6548960a

    Bug Fixes

    • Avoid query execution triggered by changes in the reactive props for control components @rachaeldawn (#1616)
    Source code(tar.gz)
    Source code(zip)
  • v1.11.3-vue(Feb 15, 2021)

    Bug Fixes

    • Fix type error in search components when dataField is not defined @bietkul https://github.com/appbaseio/reactivesearch/commit/dfc89d667e735a36da5000388530d8cc2f6484ef
    Source code(tar.gz)
    Source code(zip)
  • v3.14.2(Feb 15, 2021)

    Bug Fixes

    • Fix type error in search components when dataField is not defined @bietkul https://github.com/appbaseio/reactivesearch/commit/dfc89d667e735a36da5000388530d8cc2f6484ef
    • Fix loading state in DataSearch component if multiple requests are triggered. The loading prop would become false when all active requests will finish. @bietkul https://github.com/appbaseio/reactivecore/commit/a32bdf3adbb5364b8cfd39b4d412c899a78b2f04
    Source code(tar.gz)
    Source code(zip)
  • v1.11.2-vue(Feb 12, 2021)

    Bug Fixes

    • Fix loading state in DataSearch component if multiple requests are triggered. The loading prop would become false when all active requests will finish. @bietkul https://github.com/appbaseio/reactivecore/commit/a32bdf3adbb5364b8cfd39b4d412c899a78b2f04
    Source code(tar.gz)
    Source code(zip)
  • v1.11.0-vue(Feb 11, 2021)

    Features

    • Add renderNoResults slot in List components to render no results message @anik-ghosh-au7 (#1599)

    Bug Fixes

    • Fix array values from URL parameters in MultiList component @VincentBean (#1602)
    • Fix queries for search components @anik-ghosh-au7 (#1604)
    • Fix duplicate suggestions for array type of fields @lakhansamani (https://github.com/appbaseio/reactivecore/pull/88)
    Source code(tar.gz)
    Source code(zip)
  • v3.14.1(Feb 11, 2021)

    Bug Fixes

    • Fix controlled behavior in DateRange component @anik-ghosh-au7 (#1600)
    • Duplicate values selection in MultiDropdownRange component @anik-ghosh-au7 (#1601)
    • Fix queries for search components @anik-ghosh-au7 (#1604)
    • Prevent showLoadMore from causing setState error @jschmold (#1607)
    • Add customQuery to the DateRangeProps @jschmold (#1606)
    • Fix duplicate suggestions for array type of fields @lakhansamani (https://github.com/appbaseio/reactivecore/pull/88)
    Source code(tar.gz)
    Source code(zip)
  • v1.10.0-vue(Feb 5, 2021)

    Features

    • Add getSearchParams and setSearchParams in ReactiveBase component to manipulate URLParams @bietkul https://github.com/appbaseio/reactivesearch/commit/e19daae0ffdca49f947d696383772efaa93c6b50
    Source code(tar.gz)
    Source code(zip)
Owner
appbase.io
Open source dev tools for ElasticSearch
appbase.io
:mag_right: UI components built with Vue.js for ElasticSearch

InnerSearch : Vue.js components for ElasticSearch What is InnerSearch ? An Open Source project created to help developers working with vue.js and Elas

InnerSearch 136 Jun 4, 2021
:alien: A search component with suggestions, customizable and extendable.

vue-search-panel English | 简体中文 vue-search-panel is a search component with suggestions Contents Features Example Install Usage API Reference Features

Zhi Xiong 28 Jul 8, 2021
vue-fuse - A lightweight plugin for fuzzy search library, Fuse.js

vue-fuse A Vue.js pluggin for fuzzy search library, Fuse.js. This plugin wraps Fuse.js in a convenient component with most of the boilerplate and prop

Shayne O'Sullivan 290 Jul 6, 2021