JavaScript CSS HTML
Latest commit 059ac42 May 25, 2017 @farhan687 farhan687 Update reactivebase
Permalink
Failed to load latest commit information.
.storybook Fix webpack for ws Mar 16, 2017
app Implement SelectedFilter for sensors May 23, 2017
dist Implement SelectedFilter for sensors May 23, 2017
examples Bump version May 24, 2017
lib build May 18, 2017
manual @ 54b447a Implement SelectedFilter for sensors May 23, 2017
onboarding @ 0de1be3 Fix props: title and componentStyle and reactivebase update May 3, 2017
playground builds v1.0.0-alpha12 Apr 11, 2017
public Create Website Jul 28, 2016
tests updates defaultSelected inner prop for GeoDistanceDropdown Feb 27, 2017
umd build May 18, 2017
website compress png images Apr 4, 2017
.babelrc 🔧 indentation fixes Nov 28, 2016
.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
LICENSE.md Fix: License file had an incorrect indentation Nov 30, 2016
NOTICE.md create correct license and package files Nov 16, 2016
README.md I before e...except after s! May 21, 2017
bootstrap.html Fix popover style and bootstrap style for radio and checkboxes Dec 2, 2016
config.js apply ReactiveBase updates Feb 6, 2017
defaultexample.html Fix dependency and build issues; update reactivebase Feb 8, 2017
gulpfile.js Add bootstrap polyfills Feb 9, 2017
index.html Merge branch 'dev' Apr 4, 2017
main.js Add DataSearch story Feb 7, 2017
package.json Update reactivebase May 25, 2017
pricing.html merge dev Feb 9, 2017
webpack.config.js Implement SelectedFilter for sensors May 23, 2017
webpack.config.umd.js Fix webpack umd config Apr 18, 2017
yarn.lock update reactivebase and add TYPES May 18, 2017

README.md

Join the chat at https://gitter.im/appbaseio/reactivemaps Build Status Image Code Climate

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

TOC

  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 appbase.io 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

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 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 https://opensource.appbase.io/reactivemaps/manual.

The components are divided into two sections:

8. Developing Locally

git clone https://github.com/appbaseio/reactivemaps
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 .