Public
Edited
Apr 3
1 fork
Importers
render2 = render
render = (...args) => {
if (args.length < 3) {
throw new Error("`render` needs three arguments! (did you forget to pass `this` as #1?)");
}
let [component, props, element] = args;
if (!element) {
element = document.createElement('div');
element.reactRoot = createRoot(element);
}
// We provide `__element` as an extra prop so that components can access their element
// (to set an output value, etc).
element.reactRoot.render(React.createElement(component, {...props, __element: element}));
return element;
}
setObservableValue = (element, value) => {
element.value = value;
element.dispatchEvent(new CustomEvent('input'));
}
useObservableValue = (...args) => {
if (args.length < 2) {
throw new Error("`useObservableValue` needs two arguments; did you forget to pass __element as #1?");
}
const [element, value] = args;
React.useEffect(() => {
setObservableValue(element, value);
}, [element, value]);
}
MyInput = ({label, __element}) => {
const [value, setValue] = React.useState("");
useObservableValue(__element, value);
return jsx`<div>
<input
type="text"
value=${value}
onChange=${(ev) => setValue(ev.target.value)}
/>
${' ' + label}
</div>`
}
viewof text1 = render(MyInput, {label: 'provide label here'}, this)
viewof text2 = render(MyInput, {label: text1}, this)
viewof text1bad = render(MyInput, {label: 'provide label here'}, null)
viewof text2bad = render(MyInput, {label: text1bad}, null)
import { npm } from "@pkg/npm"
ReactDOMClient = npm("react-dom/client")
createRoot = ReactDOMClient.createRoot
import { React } from "@pkg/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.
