Skip to content

Instantly share code, notes, and snippets.

View Stars2.js
var Stars = function (props) {
var rating = props.rating || 0; // rating from 0 to 5, inclusive, in increments of 0.5
var label = props.label || null; // a label to describe the contents (for accessibility)
var src = "./img/stars_" + rating + ".svg";
return <img src={src} width="78" height="13" aria-label={label} data-tooltip={label}/>;
};
module.exports = Stars;
View Stars.js
var Stars = function (props) {
var {
idx = 0, // the index of this instance, as we only need to genenerate the <map> once!
rating = 0, // rating from 0 to 5, inclusive, in increments of 0.5
color = "#f6b85c", // the fill color
label = null // a label to describe the contents (for accessibility)
} = props;
var step = 18;
var scale = 0.13;
View Gauge.js
var Gauge = function (props) {
var {
percent = 0, // a number between 0 and 1, inclusive
width = 100, // the overall width
height = 10, // the overall height
color = "#0078bc", // the fill color
animate = false, // if true, animate when the percent changes
label = null // a label to describe the contents (for accessibility)
} = props;
View Meter.js
var Meter = function (props) {
var {
percent = 0, // a number between 0 and 1, inclusive
width = 100, // the overall width
height = 10, // the overall height
rounded = true, // if true, use rounded corners
color = "#0078bc", // the fill color
animate = false, // if true, animate when the percent changes
label = null // a label to describe the contents (for accessibility)
} = props;
View Bubble.js
var Bubble = function (props) {
var {
percent = 0, // a number between 0 and 1, inclusive
size = 20, // the width and height of the bubble
color = "#0078bc", // the fill color
label = null // a label to describe the contents (for accessibility)
} = props;
var c = size / 2;
var r = Math.sqrt(Math.pow(c, 2) * percent);
You can’t perform that action at this time.