React Launch Gauge
Inspired by SpaceX's clean display for live launch telemetry.
Github Page
Prerequisites
You should be using NodeJS and ReactJS
Installation
React Launch Gauge is available as an npm package.
npm install react-launch-gauge [-S]
or
yarn add react-launch-gauge
Usage
Using React Launch Gauge is very straightforward. Once it is included in your project, you can use the components this way:
;; const MyAwesomeReactComponent = <Gauge title='Points' value=42 max=100 />; ;
Customization
Key | Required | Type | Description |
---|---|---|---|
height | Y | Integer/String | This will set the total height of the chart. |
width | Integer/String | This will set override the width of the chart. | |
value | Number | This will set override the width of the chart. | |
high | Number | This value determines the upper-region that fills red. | |
max | Number | This sets the ceiling of the chart's scale | |
title | String | Title of the chart. | |
titleStyle | Object | Style for title text (SVG Text). | |
progressStyle | Object | Style for progress bar (SVG rect) | |
style | Object | Style that is passed to SVG. | |
wrapStyle | Object | Style for wrapper div (div). |