Design/Code
{
const container = document.createElement('div');
ReactDOM.render(htm`
<div style=${ {
// CSS Custom properties in React 🎸
"--counter-color": "hotpink"
} }>
<${Counter} initialCount=${42} />
</div>
<div style=${ {
// CSS Custom properties in React 🎸
"--counter-color": "turquoise"
} }>
<${Counter} initialCount=${21} />
</div>
`, container);
yield container
}
Counter = ({ initialCount = 0 }) => {
const [count, setCount] = React.useState(initialCount);
// With HTM, interpolate with ${} instead of JSX's {}
return htm`
<div style=${ { padding: 50 } }>
<div style=${ { fontSize: 50, color: "var(--counter-color)" }}>
${count}
</div>
<button onClick=${ () => setCount(count + 1) }>
Add 1
</button>
</div>
`
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
