import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
	ReactiveBase,
	SingleDropdownRange,
	ReactiveList,
	SelectedFilters,
} from '@appbaseio/reactivesearch';

import './index.css';

class Main extends Component {
	render() {
		return (
			<ReactiveBase
				app="car-store"
				credentials="cf7QByt5e:d2d60548-82a9-43cc-8b40-93cbbe75c34c"
			>
				<div className="row">
					<div className="col">
						<SingleDropdownRange
							componentId="PriceSensor"
							dataField="price"
							title="SingleDropdownRange"
							data={
								[{ start: 0, end: 100, label: 'Cheap' },
									{ start: 101, end: 200, label: 'Moderate' },
									{ start: 201, end: 500, label: 'Pricey' },
									{ start: 501, end: 1000, label: 'First Date' }]
							}
							URLParams
						/>
					</div>

					<div className="col">
						<SelectedFilters />
						<ReactiveList
							componentId="SearchResult"
							dataField="name"
							title="ReactiveList"
							from={0}
							size={20}
							onData={this.onData}
							pagination
							react={{
								and: 'PriceSensor',
							}}
						/>
					</div>
				</div>
			</ReactiveBase>
		);
	}

	onData(data) {
		return (
			<div key={data._id}>
				<h2>{data.name}</h2>
				<p>{data.price} - {data.rating} stars rated</p>
			</div>
		);
	}
}

ReactDOM.render(<Main />, document.getElementById('root'));

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import {
	ReactiveBase,
	SingleDropdownRange,
	ResultCard,
	SelectedFilters,
} from '@appbaseio/reactivesearch';

import './index.css';

class Main extends Component {
	render() {
		return (
			<ReactiveBase
				app="good-books-live"
				credentials="sHZWU7AYJ:d1e2922c-035c-429f-bfe4-62aa38b1c395"
			>
				<div className="row reverse-labels">
					<div className="col">
						<SingleDropdownRange
							componentId="BookSensor"
							dataField="average_rating"
							data={
								[{ start: 0, end: 3, label: 'Rating < 3' },
									{ start: 3, end: 4, label: 'Rating 3 to 4' },
									{ start: 4, end: 5, label: 'Rating > 4' }]
							}
							{...this.props}
						/>
					</div>
					<div className="col" style={{ backgroundColor: '#fafafa' }}>
						<SelectedFilters />
						<ResultCard
							componentId="SearchResult"
							dataField="original_title.raw"
							from={0}
							size={10}
							onData={this.booksCard}
							react={{
								and: 'BookSensor',
							}}
						/>
					</div>
				</div>
			</ReactiveBase>
		);
	}

	booksCard(data) {
		return {
			title: <div className="book-title-card text-center" dangerouslySetInnerHTML={{ __html: data.original_title }} />,
			description: (
				<div className="flex column justify-space-between text-center">
					<div>
						<div>by <span className="authors-list">{data.authors}</span></div>
						<div className="ratings-list flex align-center justify-center">
							<span className="stars">
								{
									Array(data.average_rating_rounded).fill('x')
										.map((item, index) => <i className="fas fa-star" key={index} />)
								}
							</span>
							<span className="avg-rating">({data.average_rating} avg)</span>
						</div>
					</div>
					<span className="pub-year">Pub {data.original_publication_year}</span>
				</div>
			),
			image: data.image,
		};
	}
}

ReactDOM.render(<Main />, document.getElementById('root'));

Update SingleDropdownRange example app