James Conkling jameslaneconkling

React Falcor Bindings

A simple rxjs-powered Higher Order Component to bind React views to the Falcor graph.

The intent here is to allow for GraphQL/Relay-esque declarative data fetching at the component level, without requiring an entire framework for support. This means the HOC bindings should play well along side other data model frameworks like Redux.

The HOC works by running queries against a falcor model, and merging the result stream into a component's props, specifically by injecting the props graphFragment (containing the query result) and graphFragmentStatus (containing the string next, complete or error).

const TodosList = ({ from, to, graphFragment, graphFragmentStatus }) => {

	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>

	<h1>Testing Ajax</h1>

	<script type='text/javascript'>
	//JLC additions
	gridControls = {}

	var map = L.mapbox.map('map', 'geointerest.map-dqz2pa8r', { zoomControl: false }).setView([17.1456, -87.0029], 8);
	map.options.maxZoom = 13;map.options.minZoom = 6;

	map.legendControl.addLegend(document.getElementById('legend-content').innerHTML);
	new L.Control.Zoom({ position: 'topleft' }).addTo(map);
	L.control.scale({ position: 'bottomleft' }).addTo(map);

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Layers</title>

	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

	<div id="root">

	</div>