useControllableState
Supports controlled and uncontrolled state patterns.
Usage
import { useControllableState } from "@siberiacancode/reactuse";
const [value, setValue, isControlled] = useControllableState({
initialValue: "draft",
});Example
import type { ComponentProps } from "react";
import { useControllableState } from "@siberiacancode/reactuse";
type NameFieldProps = ComponentProps<"input">;
export const NameField = ({ value, onChange }: NameFieldProps) => {
const [current, setCurrent] = useControllableState({
value,
initialValue: "",
onChange,
});
return (
<input
value={current}
onChange={(event) => setCurrent(event.target.value)}
/>
);
};value:
const [value, setValue] = useControllableState({ value: props.value });initialValue:
const [value, setValue] = useControllableState({ initialValue: "draft" });onChange:
const [value, setValue] = useControllableState({
initialValue: "draft",
onChange: (value) => console.log(value),
});Type Declarations
export interface UseControllableStateOptions<Value> {
initialValue?: Value;
value?: Value;
onChange?: (value: Value) => void;
}
export type UseControllableStateReturn<Value> = [
value: Value,
setValue: (nextValue: ((prevValue: Value) => Value) | Value) => void,
isControlled: boolean
];
export declare function useControllableState<Value>(
options: UseControllableStateOptions<Value>
): UseControllableStateReturn<Value>;