useControllableState
State hook that supports controlled and uncontrolled use.
Signature
useControllableState supports controlled and uncontrolled state. Pass value to control the state externally, or omit it and provide defaultValue to let the hook manage the state. The hook treats the state as controlled while value !== undefined and falls back to internal state otherwise.
function useControllableState<T>(props: {
value?: T;
defaultValue: T;
onChange?: (value: T) => void;
}): [T, (value: T) => void];Usage
import { useControllableState } from "@solarius/onset";
function Disclosure({
open,
defaultOpen = false,
onOpenChange,
}: {
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
}) {
const [isOpen, setIsOpen] = useControllableState({
value: open,
defaultValue: defaultOpen,
onChange: onOpenChange,
});
return (
<button onClick={() => setIsOpen(!isOpen)}>
{isOpen ? "Hide" : "Show"}
</button>
);
}