AppHelloGoodbye = () => {
const [showHello, setShowHello] = useState(true);
const toggleShowHello = () => setShowHello(!showHello);
return htm`
<div>
<button onClick=${toggleShowHello}>toggle hello</button>
${showHello && htm`<${HelloComponent}/>`}
</div>`;
}
HelloComponent = () => {
useEffect(() => {
console.log("hello");
return () => console.log("goodbye");
}, []);
return htm`<div>Hello</div>`;
}
AppMouseMove = () => {
const [listenMouse, setListenMouse] = useState(false);
const [mouseData, setMouseData] = useState();
const toggleListenMouse = () => setListenMouse(!listenMouse);
return htm`
<div>
<button onClick=${toggleListenMouse}>toggle mouse data</button>
${listenMouse && htm`<${MouseMoveComponent}/>`}
</div>`;
}
MouseMoveComponent = () => {
const [{ mouseX, mouseY }, setMouseOffset] = useState({
mouseX: undefined,
mouseY: undefined
});
useEffect(() => {
const onMouseMove = ({ offsetX, offsetY }) => {
console.log({ offsetX, offsetY });
setMouseOffset({ mouseX: offsetX, mouseY: offsetY });
};
window.addEventListener("mousemove", onMouseMove);
return () => window.removeEventListener("mousemove", onMouseMove);
});
return htm`<div>x:${mouseX}, y:${mouseY}</div>`;
}
AppFetch = () => {
const [seed, setSeed] = useState(0);
const { data, loading } = useFetch(`https://randomuser.me/api/?seed=${seed}`);
const nameInfo = loading
? `loading ...`
: JSON.stringify(data.results[0].name, undefined, 2);
return htm`
<div>
<div>seed: ${seed}</div>
<button onClick=${() => setSeed((seed) => seed - 1)}>previous user</button>
<button onClick=${() => setSeed((seed) => seed + 1)}>next user</button>
<pre>${nameInfo}</pre>
</div>`;
}
useFetch = (url) => {
const [state, setState] = useState({ data: null, loading: true });
useEffect(() => {
setState((state) => ({ data: state.data, loading: true }));
fetch(url)
.then((response) => response.json())
.then((json) => setState({ data: json, loading: false }));
}, [url, setState]);
return state;
}
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.
