JavaScript CSS HTML
Latest commit ff5b38c Dec 12, 2017 @metagrover metagrover Update
Failed to load latest commit information.
.storybook upgrade to webpack 3 and cleanup #65 Jul 21, 2017
app Fix geo components Oct 12, 2017
dist build Oct 31, 2017
examples Fix map events example Oct 11, 2017
lib build Oct 12, 2017
onboarding @ 0de1be3 Fix props: title and componentStyle and reactivebase update May 3, 2017
playground build Oct 31, 2017
public Create Website Jul 28, 2016
tests updates defaultSelected inner prop for GeoDistanceDropdown Feb 27, 2017
umd build Oct 31, 2017
website builds Nov 14, 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 improvements: logic and linting upgrades Oct 11, 2017
.gitignore ignore .DS_Store files Feb 8, 2017
.gitmodules removes manual from a sub-module Nov 14, 2017 Fix: License file had an incorrect indentation Nov 30, 2016 create correct license and package files Nov 16, 2016 Update Dec 12, 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 updates reactive-manual links Nov 14, 2017
package.json builds Nov 14, 2017
pricing.html updates the manual link Oct 3, 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 builds Nov 14, 2017

Join the chat at Build Status Image

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 .