jyash97

theme={{
  typography: {
    fontFamily: 'Montserrat',
  },
  colors: {
    primaryColor: '#ff4757',
  }
}}

jyash97

<DataSearch
  componentId="search"
  dataField={['group.group_topics.topic_name_raw', 'venue_name_ngrams','member.member_name']}
  placeholder="Search for Topic ,Venue or Member"
  autosuggest={true}
  className="search"
/>

jyash97

<ReactiveMap
  componentId="map"
  dataField="location"
  defaultZoom={15}
  defaultMapStyle="Light Monochrome"
  showMarkerClusters={false}
  pagination
  onPageChange={() => {
    document.getElementById('list').scrollTo(0, 0);
  }}

jyash97

<GeoDistanceDropdown
  componentId="distance"
  dataField="location"
  data={
    [
      { "distance": 10, "label": "Within 10 miles" },
      { "distance": 20, "label": "Within 20 miles" },
      { "distance": 50, "label": "Within 50 miles" },
    ]
  }

jyash97

import React, { Component } from 'react';
import { ReactiveBase } from '@appbaseio/reactivesearch';

class App extends Component {
  render() {
    return (
      <ReactiveBase
        app="meetup_app"
        credentials="lW70IgSjr:87c5ae16-73fb-4559-a29e-0a02760d2181"
        type="meetupdata1"

jyash97

.header{
  width: 100%;
  background: #ff4757;
  padding: 20px 0;
  max-height: 150px;
  top: 0;
  position: fixed;
  z-index: 1;
}

jyash97

<ReactiveBase
  app="meetup_app"
  credentials="lW70IgSjr:87c5ae16-73fb-4559-a29e-0a02760d2181"
>
  Hello from ReactiveBase
</ReactiveBase>

jyash97

theme={{
 typography: {
   fontFamily: "Muli"
 },
 colors: {
   primaryColor: "#747d8c",
   textColor: '#57606f',
   primaryTextColor: '#2f3542',
   titleColor: '#2f3542',
   secondaryColor: '#f1f2f6'

jyash97

<MultiList
  componentId="CityFilter"
  dataField="group.group_city.raw"
  title="Cities"
  selectAllLabel="All Cities"
  showCheckbox={true}
  showCount={true}
  showSearch={true}
  placeholder="Search City"
  showFilter={true}

jyash97

<MultiList
  componentId="TopicFilter"
  dataField="group.group_topics.topic_name_raw"
  title="Topics"
  selectAllLabel="All Topics"
  showCheckbox={true}
  showCount={true}
  showSearch={true}
  placeholder="Search topic"
  showFilter={true}