React Hooks Example: Timer

Simple React Hooks example. A timer that pauses when you hold the mouse button. Creates and uses a custom Hook.

by mattography

HTML

<div id="app"></div>

React

//import { useState } from 'react';
const { useState } = React;

 let colors = [
  { shade: "Brand Dark 10", color: "#FEF9E9"},
   { shade: "Brand Dark 20", color: "#FDF4DF"},
   { shade: "Brand Dark 30", color: "#FCEFCB"},
   { shade: "Brand Dark 40", color: "#F7E0A1"},
   { shade: "Brand Dark 50", color: "#F0CC71"},
   { shade: "Brand Dark 60", color: "#D5B364"},
   { shade: "Brand Dark 70", color: "#C7A55D"},
   { shade: "Brand Dark 80", color: "#B39554"},
   { shade: "Brand Dark 90", color: "#9D8249"},
   { shade: "Brand Dark 100", color: "#89723F"},
   { shade: "Brand Dark 110", color: "#7C6738"},
   { shade: "Brand Dark 120", color: "#715E34"},
   { shade: "Brand Dark 130", color: "#66552F"},
   { shade: "Brand Dark 140", color: "#5B4A29"},
   { shade: "Brand Dark 150", color: "#4F4224"},
   { shade: "Brand Dark 160", color: "#40361D"},
   { shade: "Brand Dark 170", color: "#372C18"},
   { shade: "Brand Dark 180", color: "#241E10"},
   { shade: "Brand Dark 190", color: "#18160A"},
   { shade: "Brand Light 10", color: "#F7FCF3"},
   { shade: "Brand Light 20", color: "#EDF8E6"},
   { shade: "Brand Light 30", color: "#E5F4DC"},
   { shade: "Brand Light 40", color: "#D0EAC1"},
   { shade: "Brand Light 50", color: "#BDD9AE"},
   { shade: "Brand Light 60", color: "#A3C194"},
   { shade: "Brand Light 70", color: "#94B382"},
   { shade: "Brand Light 80", color: "#82A372"},
   { shade: "Brand Light 90", color: "#6F915D"},
   { shade: "Brand Light 100", color: "#5F7D4F"},
   { shade: "Brand Light 110", color: "#577346"},
   { shade: "Brand Light 120", color: "#4F693F"},
   { shade: "Brand Light 130", color: "#465F38"},
   { shade: "Brand Light 140", color: "#3D5431"},
   { shade: "Brand Light 150", color: "#35482A"},
   { shade: "Brand Light 160", color: "#2B3A21"},
   { shade: "Brand Light 170", color: "#25331D"},
   { shade: "Brand Light 180", color: "#192315"},
   { shade: "Brand Light 190", color: "#12170D"},
   { shade: "Neutral 10", color: "#FBF9F8"},
   {...