2b:null 2c:["$","title",null,{"children":"React and CSS Custom Properties | Jeremy Stucki | Observable"}] 31:[] 2f:{"id":"d172e5de218f79df","slug":"react-and-css-custom-properties","title":"React and CSS Custom Properties","thumbnail":"079d3a70e78e4c81e1f84438634aa2e9037e32333115a4ac31c359bfb204f8a8","access_level":"public","create_time":"$D2019-03-06T09:50:35.175Z","update_time":"$D2019-03-06T09:59:43.252Z","view_time":null,"first_public_time":"$D2019-03-06T09:59:44.485Z","fork":{"id":"6bb15203a455f945","slug":"react-and-htm","title":"React and HTM","owner":{"id":"c5109c80b84a25f0","login":"jerstucki","name":"Jeremy Stucki"}},"stars":2,"starred":false,"owner":{"type":"team","id":"c5109c80b84a25f0","login":"jerstucki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":"starter_2024"},"version":74,"publish_version":74,"role":null,"authored":false,"authors":[{"type":"individual","id":"44bee8f4b23a0cb4","login":"jstcki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":null}],"members":[{"type":"individual","id":"44bee8f4b23a0cb4","login":"jstcki","name":"Jeremy Stucki","avatar_url":"https://avatars-next.observableusercontent.com/624b9c6e8a961fdf00436e72cffff012f78e7515eb1798d48230a56ce884e3ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"React and CSS Custom Properties","cells":[{"id":0,"value":"md`# React and CSS Custom Properties\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"{\n const container = document.createElement('div');\n \n\n ReactDOM.render(htm`\n

\n <${Counter} initialCount=${42} />\n

\n <${Counter} initialCount=${21} />\n

\n `, container);\n \n yield container\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"Counter = ({ initialCount = 0 }) => {\n const [count, setCount] = React.useState(initialCount);\n \n // With HTM, interpolate with ${} instead of JSX's {}\n return htm`\n

\n ${count}\n

\n \n

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"htm = (await require(\"htm@2/dist/htm.umd.js\")).bind(React.createElement)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"import {React, ReactDOM} from \"@herrstucki/react-16\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"