31:[] 2f:{"title":"A React component for rendering Observable Notebooks","cells":[{"id":0,"value":"md`# A React component for rendering Observable Notebooks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`I wrote a [React component](https://www.npmjs.com/package/@alex.garcia/observable-notebook-react) that you could use to render Observable notebooks in React. Here is how you can use it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { React, jsx } from '@mbostock/hello-jsx'","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"Notebook = (await require('@alex.garcia/observable-notebook-react@0.0.7/build/index.umd.js'))(\n React\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`\\`\\` has the following props:\n\n|prop|type|value|example\n|-|-|-|-\n|define|\\`function(runtime, observer)\\`|The [\\`define\\`](https://github.com/observablehq/runtime#runtime_module) function that defines the Observable module|Dynamic import a notebook's ES module ([ex](https://api.observablehq.com/@d3/bar-chart.js?v=3))\n|targets|string[]|The names of the cells that will be rendered, in order. If empty, all cells, named and anonymous, will be rendered.|\\`[\"chart\"]\\`\n|redefine| \\`{ [cellName] : value }\\`|Redefine values of specific cells|\\`{name: 'alex'}\\`\n|observers| \\`{ [cellName] : observer }\\`|Specify [observers](https://github.com/observablehq/runtime#observers) for specific cell values|\\`{name: {pending(value) {}}}\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`Let's do some examples - using [\\`@d3/bar-chart\\`](https://observablehq.com/@d3/bar-chart).\n\nWe can get the \\`define\\` function for this notebook by dynamically importing it:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"barChartDefine = (await import(\n 'https://api.observablehq.com/@d3/bar-chart.js?v=3'\n)).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`Now, let's render the entire notebook in React, using the \\`define\\` prop:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"React.render(\n jsx({ Notebook, define: barChartDefine })``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"md`We don't have to render the entire notebook - which can specify which cells to render using the \\`targets\\` prop (and which order to render them in):`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"React.render(\n jsx({\n Notebook,\n define: barChartDefine,\n targets: ['chart', 'data']\n })``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`We can also redefine specific cells with the \\`redefine\\` prop. Using a JS object, the keys are the names of the cells you want to redefine, and the values are the values that you want to use.\n\nFor example, let's create a bar chart with our own data, and only 200px tall:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"React.render(\n jsx({\n Notebook,\n define: barChartDefine,\n targets: ['chart', 'data'],\n redefine: {\n data: [\n { name: 'Adrian', value: 100 * Math.random() },\n { name: 'Brian', value: 100 * Math.random() },\n { name: 'Chris', value: 100 * Math.random() }\n ],\n height: 200\n }\n })``\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`\\`redefine\\` is great if you have data in React and want to use that data in an Observable notebook. If you want the other way (pass data from the Observable notebook back into React), you can use \\`observers\\` in a similar way (except you provide an [\\`observer\\`](https://github.com/observablehq/runtime#observers) instead of values).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`To demonstrate this, we will use [\\`@d3/world-tour\\`](http://observablehq.com/@d3/world-tour) as an example. It has a mutable \\`name\\` cell that is the name of the current country the map is touring (and gets updated every ~1.5 seconds), and a \\`canvas\\` cell that paints the globe and rotates to the country signified by \\`name\\`.\n\nSo, we will render \\`canvas\\` in React, and attach a custom observer for the \\`name\\` cell. In a \\`\\` component, we will have a \\`country\\` state that updates whenever \\`name\\` changes (which we will do by called the \\`setCountry\\` hook when the \\`name\\` cell is fulfilled). We will then use that \\`country\\` state in another React \\`\\` component (which shows that the data was sucessfully passed from the Observable notebook to another React component).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`First, let's get the \\`define\\` function of the world tour notebook:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"worldTourDefine = (await import(\n 'https://api.observablehq.com/@d3/world-tour.js?v=3'\n)).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`Next, let's build (and test) a \\`\\` component that wil render the current country of the world tour:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"function Label(props) {\n return jsx({\n label: props.children,\n containerStyle: {\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center'\n },\n style: {\n fontWeight: 800,\n textAlign: 'center',\n backgroundImage:\n 'linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)',\n borderRadius: 8,\n margin: '0 auto',\n color: 'white',\n textShadow: '-1px 0 black, 0 1px black, 1px 0 black, 0 -1px black',\n fontSize: 28,\n display: 'inline-block',\n padding: '.25rem 1rem'\n }\n })`

{label}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"React.render(jsx({ Label })` it works! `)","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"md`Now, let's make a \\`\\` component that will act as a wrapper for the \\`\\` component. But, it will have a \\`onCountryUpdate\\` prop that get's called whenever the \\`name\\` cell of the notebook gets updated. We do this by adding a \\`observers\\` prop to \\`\\` and calling \\`props.onCountryUpdate(value)\\` when the \\`name\\` cell get's fulfilled. Then, the parent component to \\`\\` can use this callback to update its state and pass the data to another component.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"function WorldTour(props) {\n const { onCountryUpdate } = props;\n return jsx({\n Notebook,\n define: worldTourDefine,\n targets: ['canvas'],\n redefine: {\n height: 300\n },\n observers: {\n name: {\n fulfilled(value) {\n onCountryUpdate(value); // from props!\n }\n }\n }\n })``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"md`Now, let's tie it all together with an \\`\\` component. It will render both \\`\\` and \\`\\`, and has \\`country\\` as state. Whenever \\`\\` call \\`props.onCountryUpdate\\` (which will be when \\`name\\` is fulfilled), the \\`country\\` state in \\`\\` will update, which (on the next re-render), will update the contents in \\`\\`. `","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"{\n function App() {\n const [country, setCountry] = React.useState();\n return jsx({ Label, WorldTour, onCountryUpdate: setCountry, country })`\n

\n \n {country}\n

`;\n }\n return React.render(jsx({ App })``);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"md`Perfect!\n\n## Bonus round\n\nIf you render a \\`viewof x\\` cell, you can observe the \\`x\\` cell to get updates whenever someone interacts with the \\`viewof\\` cell. For example, in this [Intro to viewof](@observablehq/a-brief-introduction-to-viewof) notebook, we can target the \\`viewof color\\` cell to render the color picker, and observe the \\`color\\` cell to get updates for when a new color is chosen.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"viewofIntroDefine = (await import(\n 'https://api.observablehq.com/@observablehq/a-brief-introduction-to-viewof.js?v=3'\n)).default","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"React.render(\n jsx({\n Notebook,\n define: viewofIntroDefine,\n targets: ['viewof color'],\n observers: {\n color: {\n fulfilled(value) {\n console.log(`New color chosen!`, value);\n }\n }\n }\n })``\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}