2b:null 2c:["$","title",null,{"children":"🤔 How to: Embed a Notebook in a React App | Alain Roan | Observable"}] 31:T573,animation = { const height = 300; const min = 0; const max = 100; const max2 = Math.pow(max, 2); const context = DOM.context2d(width, height); const canvas = context.canvas; const n = 100; const particles = new Array(n); for (let i = 0; i < n; ++i) { particles[i] = { x: (Math.random() * (width + max * 2)) - max, y: (Math.random() * (height + max * 2)) - max, vx: 0, vy: 0 }; } while (true) { for (let i = 0; i < n; ++i) { const p = particles[i]; p.x += p.vx; if (p.x < -max) p.x += width + max; else if (p.x > width + max) p.x -= width + max; p.y += p.vy; if (p.y < -max) p.y += height + max; else if (p.y > height + max) p.y -= height + max; p.vx += mutable speed * (Math.random() - .5) - 0.01 * p.vx; p.vy += mutable speed * (Math.random() - .5) - 0.01 * p.vy; } for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { const pi = particles[i]; const pj = particles[j]; const dist = Math.pow(pi.x - pj.x, 2) + Math.pow(pi.y - pj.y, 2); if (dist < max2) { context.beginPath(); context.strokeStyle = `hsl(0,0%,${100 - (((max2 - dist) / max2) * 25)}%)`; context.moveTo(pi.x, pi.y); context.lineTo(pj.x, pj.y); context.stroke(); } } } yield canvas; } }32:T435,md`Now we’re ready to edit the generated \`src/App.js\`, importing the Runtime and the notebook, loading it up, and embedding the animation in the page. We’ll use a [React ref](https://reactjs.org/docs/refs-and-the-dom.html) to provide the Observable runtime with a reference to the React DOM that we can render into. \`\`\`js import React, {Component} from "react"; import {Runtime, Inspector} from "@observablehq/runtime"; import notebook from "@observablehq/how-to-embed-a-notebook-in-a-react-app"; class App extends Component { animationRef = React.createRef(); componentDidMount() { const runtime = new Runtime(); runtime.module(notebook, name => { if (name === "animation") { return new Inspector(this.animationRef.current); } }); } render() { return (

); } } export default App; \`\`\` Voilà. Your browser should already have refreshed:

`33:T420,highlight( [11, 12, 13, 14, 15, 19, 20, 21, 22, 23], `class App extends Component { this.state = {speed: 0.1}; this.animationRef = React.createRef(); componentDidMount() { const runtime = new Runtime(); runtime.module(notebook, name => { if (name === "animation") { return new Inspector(this.animationRef.current); } if (name === "mutable speed") { return {fulfilled: (value) => { this.animationSpeed = value; }}; } }); } componentDidUpdate(nextProps, nextState) { if (nextState.speed !== this.state.speed) { this.animationSpeed.value = nextState.speed; } } setSpeed = (event) => { this.setState({speed: event.target.valueAsNumber}); } render() { return (

Speed: {this.state.speed}

); } }` )34:[] 2f:{"id":"1a9e55e5935f9eb8","slug":"how-to-embed-a-notebook-in-a-react-app","title":"🤔 How to: Embed a Notebook in a React App","thumbnail":"9f5bdba3994c643ed06d703c289e4bce8fd7622fb5b38850248006b3e46836e0","access_level":"public","create_time":"$D2020-06-13T14:49:27.236Z","update_time":"$D2020-06-13T14:49:27.236Z","view_time":null,"first_public_time":"$D2020-06-13T14:50:10.055Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"f8fce27399341cf5","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":"starter_2024"},"version":440,"publish_version":440,"role":null,"authored":false,"authors":[{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null}],"members":[{"type":"individual","id":"1e78bb64fcda4384","login":"alainro","name":"Alain Roan","avatar_url":"https://avatars-next.observableusercontent.com/877e36b5e75080b8597092e60b8898e6742bba1f4f7ba12f909dbeae5228fce3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"🤔 How to: Embed a Notebook in a React App","cells":[{"id":0,"value":"md`# 🤔 How to: Embed a Notebook in a React App\n\nSquinting at them from a certain distance, Observable notebooks and [React apps](https://reactjs.org/tutorial/tutorial.html) can look like close cousins: both are functional, reactive ways of writing UIs in JavaScript.\n\nLet’s see if we can get them to play nicely together, by embedding and controlling a notebook from React.\n\nIf you haven’t already read the [introduction to downloading and embedding notebooks](/@observablehq/downloading-and-embedding-notebooks), read that first. No worries, I can wait.\n\nNow that we’re on the same page, let’s start with a small, pretty animation — particles drifting on a random walk, connected by faint lines when they approach one another.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"mutable speed = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"slider = {\n const input = html``\n input.oninput = () => mutable speed = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`Here in this Observable notebook, you can control how fast the particles meander by moving the above \\`slider\\` to adjust their \\`mutable speed\\`.\n\nNow, let's start a brand new React app with [create-react-app](https://github.com/facebook/create-react-app). Open your Terminal:\n\n\\`\\`\\`bash\n> npx create-react-app pretty-animation\n\n... (installation flies by) ...\n\n> cd pretty-animation\n> yarn start\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"md`Your browser quietly opens a new tab to [http://localhost:3000/](http://localhost:3000/). You see the “Welcome to React” starter page:\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"md`Next, we’ll add the [Observable runtime](https://github.com/observablehq/runtime) and this notebook to the React app.\n\nTo install a notebook, you need the URL for the npm (and Yarn) installable tarball. You can retrieve it for this notebook by right-clicking on **Download code** within the notebook menu at the top of the page, and choosing to **Copy link address**.\n\n

\n\nThe URL should be:\n\n\\`\\`\\`\nhttps://api.observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app.tgz?v=3\n\\`\\`\\`\n\nBack in the terminal, add the runtime and the notebook with Yarn or npm:\n\n\\`\\`\\`bash\nyarn add @observablehq/runtime@4\nyarn add https://api.observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app.tgz?v=3\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`Now let’s add a React control to the page. We’ll use a range \\`input\\`, connected to \\`state.speed\\`, and rendering the current speed back into the HTML.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"highlight(\n [2, 14, 15, 16, 22, 23, 24],\n `class App extends Component {\n state = {speed: 0.1};\n animationRef = React.createRef();\n\n componentDidMount() {\n const runtime = new Runtime();\n runtime.module(notebook, name => {\n if (name === \"animation\") {\n return new Inspector(this.animationRef.current);\n }\n });\n }\n\n setSpeed = (event) => {\n this.setState({speed: event.target.valueAsNumber});\n }\n\n render() {\n return (\n

\n Speed: {this.state.speed}\n
\n \n

\n );\n }\n}`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`Fiddling with the input, you’ll notice that changes to \\`state.speed\\` aren’t affecting the animation ... yet. We have React state changes, but they aren't yet connected to the Observable runtime.\n\nLet’s fix that. In \\`componentDidMount\\`, we’ll store a reference this notebook’s \\`mutable speed\\` variable, and then use React’s \\`componentDidUpdate\\` callback to set that variable’s value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`And boom. Your React app is now interacting with an Observable notebook.\n\n

\n\nCongratulations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"function highlight(lines, code) {\n let pretty = hljs.highlightAuto(code, [\"js\"]).value;\n pretty = pretty.split(/\\r?\\n/).map((line, i) => {\n return lines.indexOf(i + 1) > -1 ? \n `${line}` :\n line;\n }).join('\\n');\n return html`

${pretty}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"hljs = require(\"https://bundle.run/highlight.js@9.12.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"