AppMultiple = () => {
const [count, setCount] = useState(10);
const [count2, setCount2] = useState(20);
const increment = (c) => c + 1;
const onClick = () => {
setCount(increment);
setCount2(increment);
};
return htm`
<div>
<button onClick=${onClick}>+</button>
<div>count1: ${count}</div>
<div>count2: ${count2}</div>
</div>`;
}
AppSingle = () => {
const [{ count, count2 }, setCount] = useState({ count: 10, count2: 20 });
const increment = (c) => c + 1;
const onClick = () => {
setCount(({ count, count2 }) => ({
count: increment(count),
count2: increment(count2)
}));
};
return htm`
<div>
<button onClick=${onClick}>+</button>
<div>count1: ${count}</div>
<div>count2: ${count2}</div>
</div>`;
}
AppFormBasic = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const onChangeEmail = ({ target: { value } }) => setEmail(value);
const onChangePassword = ({ target: { value } }) => setPassword(value);
return htm`
<div>
<input
name="email"
value=${email}
onChange=${onChangeEmail}
/>
<input
type="password"
name="password"
value=${password}
onChange=${onChangePassword}
/>
</div>`;
}
AppFormCustomHook = () => {
const [{ email, password }, handleChange] = useForm({
email: "",
password: ""
});
return htm`
<div>
<input
name="email"
value=${email}
onChange=${handleChange}
/>
<input
type="password"
name="password"
value=${password}
onChange=${handleChange}
/>
</div>`;
}
useForm = (initialValues) => {
const [values, setValues] = useState(initialValues);
const handleChange = ({ target: { name, value } }) =>
setValues({ ...values, [name]: value });
return [values, handleChange];
}
AppLocalStorage = () => {
const [number, setNumber] = useLocalStorage("persistent number", 0);
return htm`
<div>
<div>persistent number: ${number}</div>
<button onClick=${() => setNumber((num) => num - 1)}>-</button>
<button onClick=${() => setNumber((num) => num + 1)}>+</button>
</div>`;
}
useLocalStorage = (key, initialValue) => {
const [storedValue, setStoredValue] = useState(() => {
const item = localStorage.getItem(key);
return item === undefined ? initialValue : JSON.parse(item);
});
const setValue = (value) => {
value = value instanceof Function ? value(storedValue) : value;
setStoredValue(value);
localStorage.setItem(key, JSON.stringify(value));
};
return [storedValue, setValue];
}
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.
