Owner of Hammies, former Jupyter core developer and co-lead of Jupyter Notebook and JupyterLab teams
render(() => jsx`<p>Hello, world!</p>`)
viewof counter = render(Counter, { initialCount: 10 })
counter
function Counter({ initialCount = 0 }) {
const [count, setCount] = useObservableState(initialCount);
return jsx`<div>
<button onClick=${() => setCount(count - 1)}>-</button>
<span>${count}</span>
<button onClick=${() => setCount(count + 1)}>+</button>
</div>`;
}
viewof timer = render(TimerInput, { count: seconds })
timer
function TimerInput({ count }) {
const [unit, setUnit] = useObservableState("second");
return jsx`
<${Timer} count=${count} unit=${unit} />
<select
value=${unit}
options=${["seconds", "minutes", "hours"]}
onChange=${useCallback((event) => setUnit(event.target.value), [setUnit])}
>
<option value="second">Seconds</option>
<option value="minute">Minutes</option>
<option value="hour">Hours</option>
</select>
`;
}
function Timer({ count, unit }) {
const number = (
unit === "second" ? count : unit === "minute" ? count / 60 : count / 3600
).toFixed(2);
return jsx`
<p>
<strong>${number}</strong> ${unit}${
number === 1 ? " has" : "s have"
} elapsed
</p>
`;
}
viewof forms = render(() => {
const [state, setState] = useObservableState({
message: "Hello, form!",
hue: 180,
size: 24
});
const { message, hue, size } = state;
return jsx`<form>
<div>
<label>
<input type=text value=${message} onChange=${(e) =>
setState({ ...state, message: e.target.value })} />
${" "}<i>message</i>
</label>
</div>
<div>
<label>
<input type=range min=0 max=360 value=${hue} onChange=${(e) =>
setState({ ...state, hue: e.target.valueAsNumber })} />
${" "}<i style=${{ color: `hsl(${hue}deg, 100%, 30%)` }}>hue</i>
</label>
</div>
<div>
<${Radio} label="small" value=${12} setValue=${(size) =>
setState({ ...state, size })} selected=${size} />${" "}
<${Radio} label="medium" value=${24} setValue=${(size) =>
setState({ ...state, size })} selected=${size} />${" "}
<${Radio} label="large" value=${48} setValue=${(size) =>
setState({ ...state, size })} selected=${size} />
</div>
</form>`;
})
// viewof exampleObject = render(() => {
// const [message, setMessage] = useObservableState("Hello, form!");
// const [hue, setHue] = useObservableState(180);
// const [size, setSize] = useObservableState(24);
// return jsx`<form>
// <div>
// <label>
// <input type=text value=${message} onChange=${(e) =>
// setMessage(e.target.value)} />
// ${" "}<i>message</i>
// </label>
// </div>
// <div>
// <label>
// <input type=range min=0 max=360 value=${hue} onChange=${(e) =>
// setHue(e.target.valueAsNumber)} />
// ${" "}<i style=${{ color: `hsl(${hue}deg, 100%, 30%)` }}>hue</i>
// </label>
// </div>
// <div>
// <${Radio} label="small" value=${12} setValue=${setSize} selected=${size} />${" "}
// <${Radio} label="medium" value=${24} setValue=${setSize} selected=${size} />${" "}
// <${Radio} label="large" value=${48} setValue=${setSize} selected=${size} />
// </div>
// </form>`;
// })
forms
Radio = ({ label, value, setValue, selected }) => jsx`
<label>
<input
type="radio"
checked=${selected === value}
onChange=${() => setValue(value)}
/>
${" "}<i>${label}</i>
</label>
`
import { render, useObservableState, jsx, useCallback } from "@gnestor/react"
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.
