2e:null 2f:["$","title",null,{"children":"Reactive button state | Toph Tucker | Observable"}] 34:[] 32:{"id":"b5fe996e0320fd4a","slug":"reactive-button-state","title":"Reactive button state","thumbnail":"4ad6764ed3a6624dc8cd40bc5d4c6dd5a6bd374e6a7210e229ed60baa3884769","access_level":"public","create_time":"$D2022-05-09T21:15:11.183Z","update_time":"$D2022-05-10T07:57:39.541Z","view_time":null,"first_public_time":"$D2022-05-10T07:58:20.355Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":"pro_2026"},"version":215,"publish_version":215,"role":null,"authored":false,"authors":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null}],"members":[{"type":"individual","id":"0bb2842b01e0c652","login":"tophtucker","name":"Toph Tucker","avatar_url":"https://avatars-next.observableusercontent.com/3706c31a8f9c59bb716c022c04b9c073144cd1368b78ac85f49139be6c93c34e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"d6d8f3dc44d16858","slug":"utilities","title":"Utilities","owner":{"id":"97290e936c339d8e","login":"tophtucker","name":"Toph Tucker"}},"type":"notebook","body":{"title":"Reactive button state","cells":[{"id":0,"value":"# Reactive button state\n\nWhat place does a button have in reactive dataflow? \n\nObservable has various [Inputs](/@observablehq/inputs); you can slide a slider from 1 to 2 and that value flows into other cells that refer to the value of the slider, or select a subset of an array as checkboxes and refer to that subset elsewhere. The inputs have some state; when the state changes, it flows downstream, triggering recomputation of anything that depends on it.\n\nBut the Button input feels a little confusing to me. I don’t think people think of a button as having state that can be referenced by pure functions without mutation; rather, clicking a button produces imperative side effects. It doesn’t “have” a value; it “does” something.\n\nOur standard button stores a count of how many times it’s clicked, though you might not realize that until you tried to reference it:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof count = Inputs.button(\"Add one\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"count","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"Since anything that refers to _count_ will re-run whenever it changes, you can make the button do something every time it’s clicked:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"{\n const node = htl.html`Clicked!`;\n d3.select(node).transition().duration(1000).style(\"opacity\", 0);\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"But it’s a little counterintuitive from an imperative standpoint, right? It’s not, like, an “onclick” event listener.\n\nYou also totally _can_ attach an onclick handler in Observable, but it’s a bit of an [antipattern](https://observablehq.com/@tmcw/observable-anti-patterns-and-code-smells) to mutate another cell:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"mutable time = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"But if we were to try to think of the button in idiomatic reactive dataflow terms (to the scant degree I understand them), maybe you could think of the state as being, like, if the mouse is currently hovered over or clicking down on it. Unlike the counter paradigm, here the button returns to its initial state after you click it. Like its appearance, it’s only _instantaneously_ in a different state.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"viewof state = stateButton(\"Kick the ball\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"state","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"You could then reference that state, say, to pick up and move a ball. Click and hold the button above to move the ball below:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"{\n let x = 10;\n while (true) {\n yield htl.svg``\n if (state.clicking) x++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"It’s at least a different way of thinking about the role of a button in reactive dataflow. But if you wanted anything downstream to be _forever changed_ by a button click — to not return to their ground state when the button is no longer pressed — you’d have to introduce some kind of path dependence.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":156,"value":"viewof state2 = stateButton(\"Click me\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"mutable hasBeenClicked = false","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"{\n if (state2.clicking) mutable hasBeenClicked = true;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"Now the ball could remember where it was.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":177,"value":"viewof state3 = stateButton(\"Kick the ball\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"mutable x = 10;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"{\n while (true) {\n if (state3.clicking) mutable x = (mutable x + 1) % width;\n yield undefined;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":167,"value":"Or maybe you’d be better off just using the _reduce_ option on the standard button Observable provides:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"colors = [\"red\", \"green\", \"blue\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"viewof color = Inputs.button(\"Change color\", {\n value: colors[0],\n reduce: (d) => colors[(colors.indexOf(d) + 1) % colors.length]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"One more ball. This time, you can’t click and hold; you have to kick in discrete steps, click by click:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"viewof x2 = Inputs.button(\"Kick the ball\", {\n value: 10,\n reduce: (d) => (d + 10) % width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"---\n## Implementation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"stateButton = (label) => {\n const node = htl.html`

`;\n const button = node.querySelector(\"button\");\n const state = { hovering: false, clicking: false };\n set(node, state);\n \n button.addEventListener(\"pointerdown\", setState({clicking: true}));\n button.addEventListener(\"pointerup\", setState({clicking: false}));\n button.addEventListener(\"mouseenter\", setState({hovering: true}));\n button.addEventListener(\"mouseleave\", setState({hovering: false, clicking: false}));\n\n function setState(newState) {\n return function() {\n Object.assign(state, newState);\n set(node, state);\n }\n }\n \n return node;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"