Skip to content

Instantly share code, notes, and snippets.

@hellow554
Last active November 5, 2023 10:44
Show Gist options
  • Save hellow554/bab6946ea29d916822ebb07743276097 to your computer and use it in GitHub Desktop.
Save hellow554/bab6946ea29d916822ebb07743276097 to your computer and use it in GitHub Desktop.
import React, { useMemo } from "react";
import ReactDOM from "react-dom";
import useLocalStorage from "@rehooks/local-storage";
import { grams, kilograms } from "@buge/ts-units/mass";
function App() {
const [value, setValue, deleteValue] = useLocalStorage("hello", kilograms(0));
const [v1, v2] = useMemo(
() => [value.amount ?? "<null>", value.unit?.symbol ?? "<null>"],
[value]
);
return (
<>
<div>
Value is {v1} {v2}
</div>
<button onClick={() => setValue(grams(500))}>Set</button>
<button onClick={deleteValue}>Reset</button>
</>
);
}
ReactDOM.render(<App />, document.querySelector("#root"));
<!DOCTYPE html>
<html>
<body>
<div id="root" />
<script src="js/app.js"></script>
</body>
</html>
{
"name": "hello-react",
"version": "1.0.0",
"description": "",
"main": "app.jsx",
"scripts": {
"start": "esbuild app.jsx --bundle --servedir=. --outdir=./js"
},
"author": "",
"license": "UNLICENSED",
"dependencies": {
"@buge/ts-units": "^1.2.2",
"@rehooks/local-storage": "^2.4.5",
"esbuild": "^0.19.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"packageManager": "[email protected]"
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment