JavaScript CSS HTML
Latest commit f56d2c4 Aug 3, 2017 @metagrover metagrover bump version
Failed to load latest commit information.
.storybook upgrade to webpack 3 and cleanup #65 Jul 21, 2017
app Add beforeValueChange for PlacesSearch Aug 3, 2017
dist build Aug 3, 2017
examples Fix Slider and add beforeValueChange in GeoDistanceSlider Aug 3, 2017
lib build Aug 3, 2017
manual @ 9dc427c update reactivebase and build May 28, 2017
onboarding @ 0de1be3 Fix props: title and componentStyle and reactivebase update May 3, 2017
playground build Aug 3, 2017
public Create Website Jul 28, 2016
tests updates defaultSelected inner prop for GeoDistanceDropdown Feb 27, 2017
umd build Aug 3, 2017
website compress png images Apr 4, 2017
.babelrc upgrade to webpack 3 and cleanup #65 Jul 21, 2017
.codeclimate.yml Update .codeclimate.yml Mar 20, 2017
.editorconfig add Distance Sensor Nov 28, 2016
.eslintrc fix linting rule Feb 25, 2017
.gitignore ignore .DS_Store files Feb 8, 2017
.gitmodules Add onboarding submodule Feb 9, 2017 Fix: License file had an incorrect indentation Nov 30, 2016 create correct license and package files Nov 16, 2016 Fix doc links #63 Jul 9, 2017
bootstrap.html Fix popover style and bootstrap style for radio and checkboxes Dec 2, 2016
config.js apply ReactiveBase updates Feb 6, 2017
gulpfile.js Fix GeoDistanceDropdown hover #66 and ReactiveMap Jul 21, 2017
index.html Merge branch 'dev' Apr 4, 2017
package.json bump version Aug 3, 2017
pricing.html merge dev Feb 9, 2017
webpack.config.js upgrade to webpack 3 and cleanup #65 Jul 21, 2017
webpack.config.umd.js upgrade to webpack 3 and cleanup #65 Jul 21, 2017
yarn.lock upgrade reactivebase Aug 3, 2017

Join the chat at Build Status Image Code Climate

A React components library for building maps that update in realtime.


  1. Reactive Maps: Intro
  2. Features
  3. Component Playground
  4. Live Examples
  5. Installation
  6. Getting Started
  7. Docs Manual
  8. Developing Locally
  9. Acknowledgements

1. Reactive Maps: Intro

Reactivemaps is a React based components library for building realtime maps. It is built on top of the realtime DB service and ships with 20+ components for Lists, Dropdowns, Numeric Range, Sliders, Data Search, Places Search, Distance Slider and Dropdowns, Calendars, Feeds and Maps.

The library is conceptually divided into two parts:

  1. Sensor components and
  2. Actuator components.

Each sensor component is purpose 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.

One or more sensor components can be configured to create a combined query context to render the results via an actuator.

ReactiveMaps comes with two actuators: ReactiveMap and ReactiveList. The former displays the filtered data from individual sensor components on a map interface while latter displays the filtered data on a simple list interface.

2. Features


  • 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 a cleanly namespaced styles API that allows extending the existing component styles without hassle.
  • Built in light and dark UI themes.

Ease of Use

  • Can be installed with NPM,
  • Can be run in browser without including any NPM or bundlers (gulp, webpack, etc.), see a demo here,
  • Works out of the box with Materialize CSS and comes with a polyfill CSS for Bootstrap. Compatibility for other frameworks can be added too.

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 udpates.

4. Live Examples

A set of examples inspired by real world apps built with the ReactiveMaps library.

You can check all of them on the examples page.

5. Installation

Follow the installation guide from the official docs here.

You can try out the library live without any installation via the interactive tutorial.

6. Getting Started

Follow the getting started guide to build a Hello Maps! app from the official docs here.

7. Docs Manual

The official docs for the library are at

The components are divided into two sections:

8. Developing Locally

git clone
npm install

Start the development server on port 8012.

npm start

Examples can be accessed at https://localhost:8012/examples.

You can also start the component playground on port 9009 with

npm run storybook

By adding the manual submodule, you can access the docs locally.

git submodule init
cd manual && git submodule update

Once added, the docs manual can be accessed at http://localhost:8012/manual.

9. Acknowledgements

Cross-browser testing supported via BrowserStack .