React Bindings for The Globe.gl UI Component

react-globe.gl

React bindings for the globe.gl UI component.

A React component to represent data visualization layers on a 3-dimensional globe in a spherical projection, using ThreeJS/WebGL for 3D rendering.

Check out the examples:

• Basic (source)
• Arc Links (source)
• Highlight links (source)
• Choropleth (source)
• Elevated Polygons (source)
• Path Lines (source)
• Map Labels (source)
• Hexed Country Polygons (source)
• Tiles (source)
• Solar Terminator (source)
• Custom Globe Styling (source)
• Custom Layer (source)
• World Population (source)
• Recent Earthquakes (source)
• World Volcanoes (source)
• US outbound international airline routes (source)
• Submarine Cables (source)
• Moon Landing Sites (source)

Quick start

import Globe from 'react-globe.gl';

or using a script tag

<script src="//unpkg.com/react-globe.gl"></script>

then

ReactDOM.render(
  <Globe
    pointsData={myData}
  />, 
  myDOMElement
);

API reference

Container layout

Prop	Type	Default	Description
width	number		Getter/setter for the canvas width.
height	number		Getter/setter for the canvas height.
backgroundColor	string	#000011	Getter/setter for the background color.
backgroundImageUrl	string	-	Getter/setter for the URL of the image to be used as background to the globe. If no image is provided, the background color is shown instead.
waitForGlobeReady	bool	true	Whether to wait until the globe wrapping or background image has been fully loaded before rendering the globe or any of the data layers.
animateIn	bool	true	Whether to animate the globe initialization, by scaling and rotating the globe into its inital position. This prop only has an effect on component mount.

Globe Layer

Prop	Type	Default	Description
globeImageUrl	string	-	Getter/setter for the URL of the image used in the material that wraps the globe. If no image is provided, the globe is represented as a black sphere.
bumpImageUrl	string	-	Getter/setter for the URL of the image used to create a bump map in the material, to represent the globe’s terrain.
showAtmosphere	bool	true	Getter/setter for whether to show a bright halo surrounding the globe, representing the atmosphere.
showGraticules	bool	false	Getter/setter for whether to show a graticule grid demarking latitude and longitude lines at every 10 degrees.
onGlobeClick	func	-	Callback function for (left-button) clicks on the globe. The clicked globe coordinates and the event object are included as arguments: onGlobeClick({ lat, lng }, event).
onGlobeRightClick	func	-	Callback function for right-clicks on the globe. The clicked globe coordinates and the event object are included as arguments: onGlobeRightClick({ lat, lng }, event).

Method	Arguments	Description
globeMaterial	-	Access the internal ThreeJS MeshPhongMaterial used to wrap the globe. Can be used for more advanced styling of the globe, by extending the material with various properties, like in this example.

Points Layer

Prop	Type	Default	Description
pointsData	array	[]	Getter/setter for the list of points to represent in the points map layer. Each point is displayed as a cylindrical 3D object rising perpendicularly from the surface of the globe.
pointLabel	string or func	name	Point object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
pointLat	number, string or func	lat	Point object accessor function, attribute or a numeric constant for the cylinder’s center latitude coordinate.
pointLng	number, string or func	lng	Point object accessor function, attribute or a numeric constant for the cylinder’s center longitude coordinate.
pointColor	string or func	() => '#ffffaa'	Point object accessor function or attribute for the cylinder color.
pointAltitude	number, string or func	0.1	Point object accessor function, attribute or a numeric constant for the cylinder’s altitude in terms of globe radius units (0 = 0 altitude (flat circle), 1 = globe radius).
pointRadius	number, string or func	0.25	Point object accessor function, attribute or a numeric constant for the cylinder’s radius, in angular degrees.
pointResolution	number	12	Getter/setter for the radial geometric resolution of each cylinder, expressed in how many slice segments to divide the circumference. Higher values yield smoother cylinders.
pointsMerge	bool	false	Getter/setter for whether to merge all the point meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects.
pointsTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate point changes involving geometry modifications. A value of 0 will move the objects immediately to their final position. New objects are animated by scaling them from the ground up. Only works if pointsMerge is disabled.
onPointClick	func	-	Callback function for point (left-button) clicks. The point object and the event object are included as arguments: onPointClick(point, event). Only works if pointsMerge is disabled.
onPointRightClick	func	-	Callback function for point right-clicks. The point object and the event object are included as arguments: onPointRightClick(point, event). Only works if pointsMerge is disabled.
onPointHover	func	-	Callback function for point mouse over events. The point object (or null if there’s no point under the mouse line of sight) is included as the first argument, and the previous point object (or null) as second argument: onPointHover(point, prevPoint). Only works if pointsMerge is disabled.

Arcs Layer

Prop	Type	Default	Description
arcsData	array	[]	Getter/setter for the list of links to represent in the arcs map layer. Each link is displayed as an arc line that rises from the surface of the globe, connecting the start and end coordinates.
arcLabel	string or func	name	Arc object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
arcStartLat	number, string or func	startLat	Arc object accessor function, attribute or a numeric constant for the line’s start latitude coordinate.
arcStartLng	number, string or func	startLng	Arc object accessor function, attribute or a numeric constant for the line’s start longitude coordinate.
arcEndLat	number, string or func	endLat	Arc object accessor function, attribute or a numeric constant for the line’s end latitude coordinate.
arcEndLng	number, string or func	endLng	Arc object accessor function, attribute or a numeric constant for the line’s end longitude coordinate.
arcColor	string, [string, …] or func	() => '#ffffaa'	Arc object accessor function or attribute for the line’s color. Also supports color gradients by passing an array of colors.
arcAltitude	number, string or func	null	Arc object accessor function, attribute or a numeric constant for the arc’s maximum altitude (ocurring at the half-way distance between the two points) in terms of globe radius units (0 = 0 altitude (ground line), 1 = globe radius). If a value of null or undefined is used, the altitude is automatically set proportionally to the distance between the two points, according to the scale set in arcAltitudeAutoScale.
arcAltitudeAutoScale	number, string or func	0.5	Arc object accessor function, attribute or a numeric constant for the scale of the arc’s automatic altitude, in terms of units of the great-arc distance between the two points. A value of 1 indicates the arc should be as high as its length on the ground. Only applicable if arcAltitude is not set.
arcStroke	number, string or func	null	Arc object accessor function, attribute or a numeric constant for the line’s diameter, in angular degrees. A value of null or undefined will render a ThreeJS Line whose width is constant (1px) regardless of the camera distance. Otherwise, a TubeGeometry is used.
arcCurveResolution	number	64	Getter/setter for the arc’s curve resolution, expressed in how many straight line segments to divide the curve by. Higher values yield smoother curves.
arcCircularResolution	number	6	Getter/setter for the radial geometric resolution of each line, expressed in how many slice segments to divide the tube’s circumference. Only applicable when using Tube geometries (defined arcStroke).
arcDashLength	number, string or func	1	Arc object accessor function, attribute or a numeric constant for the length of the dashed segments in the arc, in terms of relative length of the whole line (1 = full line length).
arcDashGap	number, string or func	0	Arc object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length.
arcDashInitialGap	number, string or func	0	Arc object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length.
arcDashAnimateTime	number, string or func	0	Arc object accessor function, attribute or a numeric constant for the time duration (in ms) to animate the motion of dash positions from the start to the end point for a full line length. A value of 0 disables the animation.
arcsTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate arc changes involving geometry modifications. A value of 0 will move the arcs immediately to their final position. New arcs are animated by rising them from the ground up.
onArcClick	func	-	Callback function for arc (left-button) clicks. The arc object and the event object are included as arguments: onArcClick(arc, event).
onArcRightClick	func	-	Callback function for arc right-clicks. The arc object and the event object are included as arguments: onArcRightClick(arc, event).
onArcHover	func	-	Callback function for arc mouse over events. The arc object (or null if there’s no arc under the mouse line of sight) is included as the first argument, and the previous arc object (or null) as second argument: onArcHover(arc, prevArc).

Polygons Layer

Prop	Type	Default	Description
polygonsData	array	[]	Getter/setter for the list of polygon shapes to represent in the polygons map layer. Each polygon is displayed as a shaped cone that extrudes from the surface of the globe.
polygonLabel	string or func	name	Polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
polygonGeoJsonGeometry	string or func	geometry	Polygon object accessor function or attribute for the GeoJson geometry specification of the polygon’s shape. The returned value should have a minimum of two fields: type and coordinates. Only GeoJson geometries of type Polygon or MultiPolygon are supported, other types will be skipped.
polygonCapColor	string or func	() => '#ffffaa'	Polygon object accessor function or attribute for the color of the top surface.
polygonCapMaterial	Material, string or func	-	Polygon object accessor function, attribute or material object for the ThreeJS material to use in the top surface. This prop takes precedence over polygonCapColor, which will be ignored if both are defined.
polygonSideColor	string or func	() => '#ffffaa'	Polygon object accessor function or attribute for the color of the cone sides.
polygonSideMaterial	Material, string or func	-	Polygon object accessor function, attribute or material object for the ThreeJS material to use in the cone sides. This prop takes precedence over polygonSideColor, which will be ignored if both are defined.
polygonStrokeColor	string or func	-	Polygon object accessor function or attribute for the color to stroke the polygon perimeter. A falsy value will disable the stroking.
polygonAltitude	number, string or func	0.01	Polygon object accessor function, attribute or a numeric constant for the polygon cone’s altitude in terms of globe radius units (0 = 0 altitude (flat polygon), 1 = globe radius).
polygonCapCurvatureResolution	number, string or func	5	Polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the cap surface curvature. The finer the resolution, the more the polygon is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.
polygonsTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate polygon altitude changes. A value of 0 will size the cone immediately to their final altitude. New polygons are animated by rising them from the ground up.
onPolygonClick	func	-	Callback function for polygon (left-button) clicks. The polygon object and the event object are included as arguments: onPolygonClick(polygon, event).
onPolygonRightClick	func	-	Callback function for polygon right-clicks. The polygon object and the event object are included as arguments: onPolygonRightClick(polygon, event).
onPolygonHover	func	-	Callback function for polygon mouse over events. The polygon object (or null if there’s no polygon under the mouse line of sight) is included as the first argument, and the previous polygon object (or null) as second argument: onPolygonHover(polygon, prevPolygon).

Paths Layer

Prop	Type	Default	Description
pathsData	array	[]	Getter/setter for the list of lines to represent in the paths map layer. Each path is displayed as a line that connects all the coordinate pairs in the path array.
pathLabel	string or func	name	Path object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
pathPoints	array, string or func	pnts => pnts	Path object accessor function, attribute or an array for the set of points that define the path line. By default, each path point is assumed to be a 2-position array ([<lat>, <lon>]). This default behavior can be modified using the pathPointLat and pathPointLng methods.
pathPointLat	number, string or func	arr => arr[0]	Path point object accessor function, attribute or a numeric constant for the latitude coordinate.
pathPointLng	number, string or func	arr => arr[1]	Path point object accessor function, attribute or a numeric constant for the longitude coordinate.
pathPointAlt	number, string or func	0.001	Path point object accessor function, attribute or a numeric constant for the point altitude, in terms of globe radius units (0 = 0 altitude (ground), 1 = globe radius).
pathResolution	number	2	Getter/setter for the path’s angular resolution, in lat/lng degrees. If the ground distance (excluding altitude) between two adjacent path points is larger than this value, the line segment will be interpolated in order to approximate the curvature of the sphere surface. Lower values yield more perfectly curved lines, at the cost of performance.
pathColor	string, [string, …] or func	() => '#ffffaa'	Path object accessor function or attribute for the line’s color. Also supports color gradients by passing an array of colors. Transparent colors are not supported in Fat Lines with set width.
pathStroke	number, string or func	null	Path object accessor function, attribute or a numeric constant for the line’s diameter, in angular degrees. A value of null or undefined will render a ThreeJS Line whose width is constant (1px) regardless of the camera distance. Otherwise, a FatLine is used.
pathDashLength	number, string or func	1	Path object accessor function, attribute or a numeric constant for the length of the dashed segments in the path line, in terms of relative length of the whole line (1 = full line length).
pathDashGap	number, string or func	0	Path object accessor function, attribute or a numeric constant for the length of the gap between dash segments, in terms of relative line length.
pathDashInitialGap	number, string or func	0	Path object accessor function, attribute or a numeric constant for the length of the initial gap before the first dash segment, in terms of relative line length.
pathDashAnimateTime	number, string or func	0	Path object accessor function, attribute or a numeric constant for the time duration (in ms) to animate the motion of dash positions from the start to the end point for a full line length. A value of 0 disables the animation.
pathTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate path changes. A value of 0 will move the paths immediately to their final position. New paths are animated from start to end.
onPathClick	func	-	Callback function for path (left-button) clicks. The path object and the event object are included as arguments: onPathClick(arc, event).
onPathRightClick	func	-	Callback function for path right-clicks. The path object and the event object are included as arguments: onPathRightClick(arc, event).
onPathHover	func	-	Callback function for path mouse over events. The path object (or null if there’s no path under the mouse line of sight) is included as the first argument, and the previous path object (or null) as second argument: onPathHover(path, prevPath).

Hex Bin Layer

Prop	Type	Default	Description
hexBinPointsData	array	[]	Getter/setter for the list of points to aggregate using the hex bin map layer. Each point is added to an hexagonal prism 3D object that represents all the points within a tesselated portion of the space.
hexLabel	string or func	-	Hex object accessor function or attribute for label (shown as tooltip). An hex object includes all points binned, and has the syntax: { points, sumWeight, center: { lat, lng } }. Supports plain text or HTML content.
hexBinPointLat	number, string or func	lat	Point object accessor function, attribute or a numeric constant for the latitude coordinate.
hexBinPointLng	number, string or func	lng	Point object accessor function, attribute or a numeric constant for the longitude coordinate.
hexBinPointWeight	number, string or func	1	Point object accessor function, attribute or a numeric constant for the weight of the point. Weights for points in the same bin are summed and determine the hexagon default altitude.
hexBinResolution	number	4	The geographic binning resolution as defined by H3. Determines the area of the hexagons that tesselate the globe’s surface. Accepts values between 0 and 15. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons.
hexMargin	number or func	0.2	The radial margin of each hexagon. Margins above 0 will create gaps between adjacent hexagons and serve only a visual purpose, as the data points within the margin still contribute to the hexagon’s data. The margin is specified in terms of fraction of the hexagon’s surface diameter. Values below 0 or above 1 are disadvised. This property also supports using an accessor method based on the hexagon’s aggregated data, following the syntax: hexMargin(({ points, sumWeight, center: { lat, lng }}) => ...). This method should return a numeric constant.
hexAltitude	number or func	({ sumWeight }) => sumWeight * 0.01	The altitude of each hexagon, in terms of globe radius units (0 = 0 altitude (flat hexagon), 1 = globe radius). This property also supports using an accessor method based on the hexagon’s aggregated data, following the syntax: hexAltitude(({ points, sumWeight, center: { lat, lng }}) => ...). This method should return a numeric constant.
hexTopCurvatureResolution	number	5	The resolution (in angular degrees) of the top surface curvature. The finer the resolution, the more the top area is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.
hexTopColor	func	() => '#ffffaa'	Accessor method for each hexagon’s top color. The method should follow the signature: hexTopColor(({ points, sumWeight, center: { lat, lng }}) => ...) and return a color string.
hexSideColor	func	() => '#ffffaa'	Accessor method for each hexagon’s side color. The method should follow the signature: hexSideColor(({ points, sumWeight, center: { lat, lng }}) => ...) and return a color string.
hexBinMerge	bool	false	Getter/setter for whether to merge all the hexagon meshes into a single ThreeJS object, for improved rendering performance. Visually both options are equivalent, setting this option only affects the internal organization of the ThreeJS objects.
hexTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate hexagon changes related to geometry modifications (altitude, radius). A value of 0 will move the hexagons immediately to their final position. New hexagons are animated by scaling them from the ground up. Only works if hexBinMerge is disabled.
onHexClick	func	-	Callback function for hexagon (left-button) clicks. The hex object including all points binned and the event object are included as arguments: onHexClick({ points, sumWeight, center: { lat, lng } }, event). Only works if hexBinMerge is disabled.
onHexRightClick	func	-	Callback function for hexagon right-clicks. The hex object including all points binned and the event object are included as arguments: onHexRightClick({ points, sumWeight, center: { lat, lng } }, event). Only works if hexBinMerge is disabled.
onHexHover	func	-	Callback function for hexagon mouse over events. The hex object (or null if there’s no hex under the mouse line of sight) is included as the first argument, and the previous hex object (or null) as second argument: onHexHover(hex, prevHex). Each hex object includes all points binned, and has the syntax: { points, sumWeight, center: { lat, lng } }. Only works if hexBinMerge is disabled.

Hexed Polygons Layer

Prop	Type	Default	Description
hexPolygonsData	array	[]	Getter/setter for the list of polygon shapes to represent in the hexed polygons map layer. Each polygon is displayed as a tesselated group of hexagons that approximate the polygons shape according to the resolution specified in hexPolygonResolution.
hexPolygonLabel	string or func	name	Hexed polygon object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
hexPolygonGeoJsonGeometry	string or func	geometry	Hexed polygon object accessor function or attribute for the GeoJson geometry specification of the polygon’s shape. The returned value should have a minimum of two fields: type and coordinates. Only GeoJson geometries of type Polygon or MultiPolygon are supported, other types will be skipped.
hexPolygonColor	string or func	() => '#ffffaa'	Hexed polygon object accessor function or attribute for the color of each hexagon in the polygon.
hexPolygonAltitude	number, string or func	0.001	Hexed polygon object accessor function, attribute or a numeric constant for the polygon’s hexagons altitude in terms of globe radius units (0 = 0 altitude, 1 = globe radius).
hexPolygonResolution	number, string or func	3	Hexed polygon object accessor function, attribute or a numeric constant for the geographic binning resolution as defined by H3. Determines the area of the hexagons that tesselate the globe’s surface. Accepts values between 0 and 15. Level 0 partitions the earth in 122 (mostly) hexagonal cells. Each subsequent level sub-divides the previous in roughly 7 hexagons.
hexPolygonMargin	number, string or func	0.2	Hexed polygon object accessor function, attribute or a numeric constant for the radial margin of each hexagon. Margins above 0 will create gaps between adjacent hexagons within a polygon. The margin is specified in terms of fraction of the hexagon’s surface diameter. Values below 0 or above 1 are disadvised.
hexPolygonCurvatureResolution	number, string or func	5	Hexed polygon object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of each hexed polygon surface curvature. The finer the resolution, the more the polygon hexes are fragmented into smaller faces to approximate the spheric surface, at the cost of performance.
hexPolygonsTransitionDuration	number	0	Getter/setter for duration (ms) of the transition to animate hexed polygons altitude and margin changes. A value of 0 will move the hexagons immediately to their final state. New hexed polygons are animated by sizing each hexagon from 0 radius.
onHexPolygonClick	func	-	Callback function for hexed polygon (left-button) clicks. The polygon object and the event object are included as arguments: onHexPolygonClick(polygon, event).
onHexPolygonRightClick	func	-	Callback function for hexed polygon right-clicks. The polygon object and the event object are included as arguments: onHexPolygonRightClick(polygon, event).
onHexPolygonHover	func	-	Callback function for hexed polygon mouse over events. The polygon object (or null if there’s no polygon under the mouse line of sight) is included as the first argument, and the previous polygon object (or null) as second argument: onHexPolygonHover(polygon, prevPolygon).

Tiles Layer

Prop	Type	Default	Description
tilesData	array	[]	Getter/setter for the list of tiles to represent in the tiles map layer. Each tile is displayed as a spherical surface segment. The segments can be placed side-by-side for a tiled surface and each can be styled separately.
tileLabel	string or func	name	Tile object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
tileLat	number, string or func	lat	Tile object accessor function, attribute or a numeric constant for the segment’s centroid latitude coordinate.
tileLng	number, string or func	lng	Tile object accessor function, attribute or a numeric constant for the segment’s centroid longitude coordinate.
tileAltitude	number, string or func	0.01	Tile object accessor function, attribute or a numeric constant for the segment’s altitude in terms of globe radius units.
tileWidth	number, string or func	1	Tile object accessor function, attribute or a numeric constant for the segment’s longitudinal width, in angular degrees.
tileHeight	number, string or func	1	Tile object accessor function, attribute or a numeric constant for the segment’s latitudinal height, in angular degrees.
tileUseGlobeProjection	bool, string or func	true	Tile object accessor function, attribute or a boolean constant for whether to use the globe’s projection to shape the segment to its relative tiled position (true), or break free from this projection and shape the segment as if it would be laying directly on the equatorial perimeter (false).
tileMaterial	Material, string or func	() => new MeshLambertMaterial({ color: '#ffbb88' })	Tile object accessor function, attribute or material object for the ThreeJS material used to style the segment’s surface.
tileCurvatureResolution	number, string or func	5	Tile object accessor function, attribute or a numeric constant for the resolution (in angular degrees) of the surface curvature. The finer the resolution, the more the tile geometry is fragmented into smaller faces to approximate the spheric surface, at the cost of performance.
tilesTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate tile changes involving geometry modifications. A value of 0 will move the tiles immediately to their final position. New tiles are animated by scaling them from the centroid outwards.
onTileClick	func	-	Callback function for tile (left-button) clicks. The tile object and the event object are included as arguments: onTileClick(tile, event).
onTileRightClick	func	-	Callback function for tile right-clicks. The tile object and the event object are included as arguments: onTileRightClick(tile, event).
onTileHover	func	-	Callback function for tile mouse over events. The tile object (or null if there’s no tile under the mouse line of sight) is included as the first argument, and the previous tile object (or null) as second argument: onTileHover(tile, prevTile).

Labels Layer

Prop	Type	Default	Description
labelsData	array	[]	Getter/setter for the list of label objects to represent in the labels map layer.
labelLabel	string or func	-	Label object accessor function or attribute for its own tooltip label. Supports plain text or HTML content.
labelLat	number, string or func	lat	Label object accessor function, attribute or a numeric constant for the latitude coordinate.
labelLng	number, string or func	lng	Label object accessor function, attribute or a numeric constant for the longitude coordinate.
labelText	string or func	text	Label object accessor function or attribute for the label text.
labelColor	string or func	() => 'lightgrey'	Label object accessor function or attribute for the label color.
labelAltitude	number, string or func	0	Label object accessor function, attribute or a numeric constant for the label altitude in terms of globe radius units.
labelSize	number, string or func	0.5	Label object accessor function, attribute or a numeric constant for the label text height, in angular degrees.
labelTypeFace	typeface object	helvetiker regular	Getter/setter for the text font typeface JSON object. Supports any typeface font generated by Facetype.js.
labelRotation	number, string or func	0	Label object accessor function, attribute or a numeric constant for the label rotation in degrees. The rotation is performed clockwise along the axis of its latitude parallel plane.
labelResolution	number	3	Getter/setter for the text geometric resolution of each label, expressed in how many segments to use in the text curves. Higher values yield smoother labels.
labelIncludeDot	bool, string or func	true	Label object accessor function, attribute or a bool constant for whether to include a dot marker next to the text indicating the exact lat, lng coordinates of the label. If enabled the text will be rendered offset from the dot.
labelDotRadius	number, string or func	0.1	Label object accessor function, attribute or a numeric constant for the radius of the dot marker, in angular degrees.
labelDotOrientation	string or func	() => 'bottom'	Label object accessor function or attribute for the orientation of the label if the dot marker is present. Possible values are right, top and bottom.
labelsTransitionDuration	number	1000	Getter/setter for duration (ms) of the transition to animate label changes involving position modifications (lat, lng, altitude, rotation). A value of 0 will move the labels immediately to their final position. New labels are animated by scaling their size.
onLabelClick	func	-	Callback function for label (left-button) clicks. The label object and the event object are included as arguments: onlabelClick(label, event).
onLabelRightClick	func	-	Callback function for label right-clicks. The label object and the event object are included as arguments: onlabelRightClick(label, event).
onLabelHover	func	-	Callback function for label mouse over events. The label object (or null if there’s no label under the mouse line of sight) is included as the first argument, and the previous label object (or null) as second argument: onlabelHover(label, prevlabel).

Custom Layer

Prop	Type	Default	Description
customLayerData	array	[]	Getter/setter for the list of items to represent in the custom map layer. Each item is rendered according to the customThreeObject method.
customLayerLabel	string or func	name	Object accessor function or attribute for label (shown as tooltip). Supports plain text or HTML content.
customThreeObject	Object3d, string or func	-	Object accessor function or attribute for generating a custom 3d object to render as part of the custom map layer. Should return an instance of ThreeJS Object3d. The callback method’s signature includes the object’s data as well as the globe radius: customThreeObject((objData, globeRadius) => { ... }).
customThreeObjectUpdate	string or func	-	Object accessor function or attribute for updating an existing custom 3d object with new data. This can be used for performance improvement on data updates as the objects don’t need to be removed and recreated at each update. The callback method’s signature includes the object to be update, its new data and the globe radius: customThreeObjectUpdate((obj, objData, globeRadius) => { ... }).
onCustomLayerClick	func	-	Callback function for custom object (left-button) clicks. The custom object and the event object are included as arguments: onCustomLayerClick(obj, event).
onCustomLayerRightClick	func	-	Callback function for custom object right-clicks. The custom object and the event object are included as arguments: onCustomLayerRightClick(obj, event).
onCustomLayerHover	func	-	Callback function for custom object mouse over events. The custom object (or null if there’s no object under the mouse line of sight) is included as the first argument, and the previous custom object (or null) as second argument: onCustomLayerHover(obj, prevObj).

Render control

Prop	Type	Default	Description
rendererConfig	object	{ antialias: true, alpha: true }	Configuration parameters to pass to the ThreeJS WebGLRenderer constructor. This prop only has an effect on component mount.
enablePointerInteraction	bool	true	Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you’re looking for maximum gain in your globe performance it’s recommended to switch off this property.
pointerEventsFilter	func	() => true	Getter/setter for the filter function which defines whether a particular object can be the target of pointer interactions. In general, objects that are closer to the camera get precedence in capturing pointer events. This function allows having ignored object layers so that pointer events can be passed through to deeper objects in the various globe layers. The ThreeJS object and its associated data (if any) are passed as arguments: pointerEventsFilter(obj, data). The function should return a boolean value.

Method	Arguments	Description
pointOfView	{ lat, lng, altitude } [,ms=0]	By default the camera will aim at the cross between the equator and the prime meridian (0,0 coordinates), at an altitude of 2.5 globe radii.
pauseAnimation	-	Pauses the rendering cycle of the component, effectively freezing the current view and cancelling all user interaction. This method can be used to save performance in circumstances when a static image is sufficient.
resumeAnimation	-	Resumes the rendering cycle of the component, and re-enables the user interaction. This method can be used together with pauseAnimation for performance optimization purposes.
onZoom	func	-
scene	-	Access the internal ThreeJS Scene. Can be used to extend the current scene with additional objects not related to globe.gl.
camera	-	Access the internal ThreeJS Camera.
renderer	-	Access the internal ThreeJS WebGL renderer.
postProcessingComposer	-	Access the post-processing composer. Use this to add post-processing rendering effects to the scene. By default the composer has a single pass (RenderPass) that directly renders the scene without any effects.
controls	-	Access the internal ThreeJS orbit controls object.

Utility

Method	Arguments	Description
getCoords	lat, lng [,altitude=0]	Utility method to translate spherical coordinates to cartesian. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the equivalent {x, y, z} cartesian spatial coordinates.
getScreenCoords	lat, lng [,altitude=0]	Utility method to translate spherical coordinates to the viewport domain. Given a pair of latitude/longitude coordinates and optionally altitude (in terms of globe radius units), returns the current equivalent {x, y} in viewport coordinates.
toGeoCoords	{ x, y, z }	Utility method to translate cartesian coordinates to the geographic domain. Given a set of 3D cartesian coordinates {x, y, z}, returns the equivalent {lat, lng, altitude} spherical coordinates. Altitude is defined in terms of globe radius units.
toGlobeCoords	x, y	Utility method to translate viewport coordinates to the globe surface coordinates directly under the specified viewport pixel. Returns the globe coordinates in the format { lat, lng }, or null if the globe does not currently intersect with that viewport location.

Download Details:

Author: vasturiano

Demo: https://vasturiano.github.io/react-globe.gl/example/world-population/

Source Code: https://github.com/vasturiano/react-globe.gl

#react #reactjs #javascript

What is GEEK

Buddha Community

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

• Performance: It delivers optimal performance.
• Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
• UI design: React Native enables you to design simple and responsive UI for your mobile app.
• 3rd party plugins: This framework supports 3rd party plugins.
• Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

• Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
• Near-native user experience: React Native provides several native components, and these are platform agnostic.
• The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native

A Beginner’s Guide to React

It’s nearly the end of 2019, and you think you might finally be ready to get started learning ReactJS. You hear it’s become the most popular front end JavaScript framework. You sit down at your computer, and are ready to give it a go. Starting off, you probably jump straight in with Facebook’s official React tutorial. After that maybe another tutorial on medium. You do some reading here and there, and if you are like me, you end up pretty confused. You hear terms like “props”, “state”, “virtual dom”, “ES6”, “babel”, “webpack”, “higher-order components”, “Redux”, and much more. Soon you realise that learning React is not as easy as you once imagined and either quit or confusedly persevere on.

Does this sound like you? Because this is exactly how I felt when I started learning React. All I wanted to do was set up a simple React app, and I was getting very confused. I thought React had a fairly difficult learning curve, and I was feeling pretty overwhelmed.

I soon realised that React was fairly easy to learn, but the way I went about learning it was difficult. The problem was I didn’t know how to learn it. Firstly, I was relatively new to the world of front end development and I didn’t know what I was doing. I was somewhat familiar with HTML and only used JavaScript a few times. That certainly did not help. There were technologies and information that I should have spent a little more time learning prior to React, that would have lowered the learning curve tremendously.

This is what I would have liked to have known before I began writing a single line of React code:

Prerequisites

First, let’s nail out the basics. Before you start diving into React, you should probably have at least a little experience with each of the following:

- HTML

- CSS

- ES6 JavaScript

- NodeJS + NPM

If you are familiar with each of the above, then learning React is going to be a lot easier for you. React is big on JavaScript and HTML.

---

What is React

React is a JavaScript library built in 2013 by the Facebook development team. React wanted to make user interfaces more modular (or reusable) and easier to maintain. According to React’s website, it is used to “Build encapsulated components that manage their own state, then compose them to make complex UIs.”

Understand the Basic

React has 4 ideas that are key to getting started learning with React.

1.Components

React apps have component based architectures. Conceptually, components are more like JavaScript Functions.They accept inputs(called “props”) and return React elements describing what should appear on screen. Probably a title, an author’s name, the date published, some text, some photos, like buttons, share buttons, etc. If you were building this blog in React, each of these would most likely be a component.

If you create a component for a share button, you can reuse that component to build other share buttons, or reuse it across multiple different kinds of articles. This is the idea with React. You are building components that then can be used and reused to build bigger components.

2. Props

Props is short for properties. Properties are how you pass information unidirectionally from parent to child components. I like to think of them as property attributes or parameters, since it is conceptually similar to passing arguments into a function, and syntactically similar to HTML attributes. Look at the example used previously. If this were a React component, the props would be what you are passing in as “src”, “alt”, “height”, and “width”. You can also pass in callback functions for the child to execute such as “onClick”.

3. State

Many React components will be stateful components. State is exactly what it sounds like. It’s the internal state of your component. Think of a checkbox on a web page. It can either be checked or unchecked. When the user clicks on the checkbox, it will check the box if it is unchecked, and when the user clicks it again it will uncheck the box. The checkbox is an example of a stateful component. In this example, the internal state of the checkbox would be a boolean that would either be checked true or checked false.

While many components have state, some are stateless. Just because lots of components have state doesn’t mean that every component needs to be stateful. Sometimes it makes sense to omit state from a component. Think of an image html tag.

**<img src=”smiley.gif” alt=”Smiley face” height=”42" width=”42">**

If this image tag would be an example of a stateless component. You are passing in parameters, but the image tag itself does not have an internal state that it needs to manage itself.

4. React lifecycle

React is much easier to understand if you have a basic idea behind the React component lifecycle. The React lifecycle describes when and how a component should mount, render, update, and unmount in the DOM. React has lifecycle hooks (React component methods) that help you manage state, props, and work with the lifecycle flow.

**React component lifecycle has three categories **— Mounting, Updating and Unmounting.

1. The render_() _is the most used lifecycle method.

• It is a pure function.
• You cannot set state in render()

2. The componentDidMount() happens as soon as your component is mounted.

• You can set state here but with caution.

3. The componentDidUpdate_() _happens as soon as the updating happens.

• You can set state here but with caution.

4. The componentWillUnmount_() _happens just before the component unmounts and is destroyed.

• This is a good place to cleanup all the data.
• You cannot set state here.

5. The shouldComponentUpdate_() _can be used rarely.

• It can be called if you need to tell React not to re-render for a certain state or prop change.
• This needs to be used with caution only for certain performance optimizations.

6.The two new lifecycle methods are getDerivedStateFromProps() and getSnapshotBeforeUpdate().

• They need to be used only occasionally.
• Not many examples are out there for these two methods and they are still being discussed and will have more references in the future.

Note: You can read more about React’s lifecycle here

These are only the basics to get started.

#react-for-beginner #react-lifecycle #react #react-components #ui

Top 3 React UI Component / Asset Libraries - 2021 - To Make Beautiful Websites

❗️ You DON’T have to be a great designer to build beautiful websites. Today I share my top 3 React UI Component / Asset libraries for making beautiful websites.

1. Framer Motion: https://www.framer.com/motion/
   2a. TailwindCSS: https://tailwindcss.com/
   2b. TailwindUI: https://tailwindui.com/
2. Undraw: https://undraw.co/

🧠 Knowing what libraries are out there and when to use them is the difference between a good and a great developer.

---

WHO AM I: I’m Dylan, a Cloud Engineer living in Bend, Oregon. I use my background in tech to make videos about technology that enables and grows businesses.

---

🌍 My website / blog -
https://dylanalbertazzi.com/

#react #ui #top 3 react ui component #libraries

How to Select and Hire the Best React JS and React Native Developers?

Since March 2020 reached 556 million monthly downloads have increased, It shows that React JS has been steadily growing. React.js also provides a desirable amount of pliancy and efficiency for developing innovative solutions with interactive user interfaces. It’s no surprise that an increasing number of businesses are adopting this technology. How do you select and recruit React.js developers who will propel your project forward? How much does a React developer make? We’ll bring you here all the details you need.

What is React.js?

Facebook built and maintains React.js, an open-source JavaScript library for designing development tools. React.js is used to create single-page applications (SPAs) that can be used in conjunction with React Native to develop native cross-platform apps.

React vs React Native

• React Native is a platform that uses a collection of mobile-specific components provided by the React kit, while React.js is a JavaScript-based library.
• React.js and React Native have similar syntax and workflows, but their implementation is quite different.
• React Native is designed to create native mobile apps that are distinct from those created in Objective-C or Java. React, on the other hand, can be used to develop web apps, hybrid and mobile & desktop applications.
• React Native, in essence, takes the same conceptual UI cornerstones as standard iOS and Android apps and assembles them using React.js syntax to create a rich mobile experience.

What is the Average React Developer Salary?

In the United States, the average React developer salary is $94,205 a year, or $30-$48 per hour, This is one of the highest among JavaScript developers. The starting salary for junior React.js developers is $60,510 per year, rising to $112,480 for senior roles.

* React.js Developer Salary by Country

• United States- $120,000
• Canada - $110,000
• United Kingdom - $71,820
• The Netherlands $49,095
• Spain - $35,423.00
• France - $44,284
• Ukraine - $28,990
• India - $9,843
• Sweden - $55,173
• Singapore - $43,801

In context of software developer wage rates, the United States continues to lead. In high-tech cities like San Francisco and New York, average React developer salaries will hit $98K and $114per year, overall.

However, the need for React.js and React Native developer is outpacing local labour markets. As a result, many businesses have difficulty locating and recruiting them locally.

It’s no surprise that for US and European companies looking for professional and budget engineers, offshore regions like India are becoming especially interesting. This area has a large number of app development companies, a good rate with quality, and a good pool of React.js front-end developers.

As per Linkedin, the country’s IT industry employs over a million React specialists. Furthermore, for the same or less money than hiring a React.js programmer locally, you may recruit someone with much expertise and a broader technical stack.

How to Hire React.js Developers?

• Conduct thorough candidate research, including portfolios and areas of expertise.
• Before you sit down with your interviewing panel, do some homework.
• Examine the final outcome and hire the ideal candidate.

Why is React.js Popular?

React is a very strong framework. React.js makes use of a powerful synchronization method known as Virtual DOM, which compares the current page architecture to the expected page architecture and updates the appropriate components as long as the user input.

React is scalable. it utilises a single language, For server-client side, and mobile platform.

React is steady.React.js is completely adaptable, which means it seldom, if ever, updates the user interface. This enables legacy projects to be updated to the most new edition of React.js without having to change the codebase or make a few small changes.

React is adaptable. It can be conveniently paired with various state administrators (e.g., Redux, Flux, Alt or Reflux) and can be used to implement a number of architectural patterns.

Is there a market for React.js programmers?
The need for React.js developers is rising at an unparalleled rate. React.js is currently used by over one million websites around the world. React is used by Fortune 400+ businesses and popular companies such as Facebook, Twitter, Glassdoor and Cloudflare.

Final thoughts:

As you’ve seen, locating and Hire React js Developer and Hire React Native developer is a difficult challenge. You will have less challenges selecting the correct fit for your projects if you identify growing offshore locations (e.g. India) and take into consideration the details above.

If you want to make this process easier, You can visit our website for more, or else to write a email, we’ll help you to finding top rated React.js and React Native developers easier and with strives to create this operation

#hire-react-js-developer #hire-react-native-developer #react #react-native #react-js #hire-react-js-programmer

React Starter Kit: Build Web Apps with React, Relay and GraphQL.

React Starter Kit — "isomorphic" web app boilerplate   

React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Express, GraphQL and React, containing modern web development tools such as Webpack, Babel and Browsersync. Helping you to stay productive following the best practices. A solid starting point for both professionals and newcomers to the industry.

See getting started guide, demo, docs, roadmap  |  Join #react-starter-kit chat room on Gitter  |  Visit our sponsors:

 

Hiring

Getting Started

• Follow the getting started guide to download and run the project (Node.js >= 8.16.2)
• Check the code recipes used in this boilerplate, or share yours

Customization

The master branch of React Starter Kit doesn't include a Flux implementation or any other advanced integrations. Nevertheless, we have some integrations available to you in feature branches that you can use either as a reference or merge into your project:

• feature/redux (PR) — isomorphic Redux by Pavel Lang (see how to integrate Redux) (based on master)
• feature/apollo (PR) — isomorphic Apollo Client by Pavel Lang (see Tracking PR #1147) (based on feature/redux)
• feature/react-intl (PR) — isomorphic Redux and React Intl by Pavel Lang (see how to integrate React Intl) (based on feature/apollo)
• feature/apollo-pure (PR) — Apollo devtools and TypeScript integration by piglovesyou (based on master)

You can see status of most reasonable merge combination as PRs labeled as TRACKING

If you think that any of these features should be on master, or vice versa, some features should removed from the master branch, please let us know. We love your feedback!

Comparison

	React Starter Kit	React Static Boilerplate	ASP.NET Core Starter Kit
App type	Isomorphic (universal)	Single-page application	Single-page application
Frontend
Language	JavaScript (ES2015+, JSX)	JavaScript (ES2015+, JSX)	JavaScript (ES2015+, JSX)
Libraries	React, History, Universal Router	React, History, Redux	React, History, Redux
Routes	Imperative (functional)	Declarative	Declarative, cross-stack
Backend
Language	JavaScript (ES2015+, JSX)	n/a	C#, F#
Libraries	Node.js, Express, Sequelize, GraphQL	n/a	ASP.NET Core, EF Core, ASP.NET Identity
SSR	Yes	n/a	n/a
Data API	GraphQL	n/a	Web API

Backers

♥ React Starter Kit? Help us keep it alive by donating funds to cover project expenses via OpenCollective or Bountysource!

 

How to Contribute

Anyone and everyone is welcome to contribute to this project. The best way to start is by checking our open issues, submit a new issue or feature request, participate in discussions, upvote or downvote the issues you like or dislike, send pull requests.

Learn More

• Getting Started with React.js
• Getting Started with GraphQL and Relay
• React.js Questions on StackOverflow
• React.js Discussion Board
• Flux Architecture for Building User Interfaces
• Enzyme — JavaScript Testing utilities for React
• Flow — A static type checker for JavaScript
• The Future of React
• Learn ES6, ES6 Features

Related Projects

• GraphQL Starter Kit — Boilerplate for building data APIs with Node.js, JavaScript (via Babel) and GraphQL
• Membership Database — SQL schema boilerplate for user accounts, profiles, roles, and auth claims
• Babel Starter Kit — Boilerplate for authoring JavaScript/React.js libraries

Support

• #react-starter-kit on Stack Overflow — Questions and answers
• #react-starter-kit on Gitter — Watch announcements, share ideas and feedback
• GitHub issues, or Scrum board — File issues, send feature requests
• appear.in/react — Open hours! Exchange ideas and experiences (React, GraphQL, startups and pet projects)
• @koistya on Codementor, or Skype — Private consulting

License

Copyright © 2014-present Kriasoft, LLC. This source code is licensed under the MIT license found in the LICENSE.txt file. The documentation to the project is licensed under the CC BY-SA 4.0 license.

---

Author: kriasoft
Source Code: https://github.com/kriasoft/react-starter-kit
License: MIT License

#graphql #react