Docs
useUncontrolledState

Manage an uncontrolled state with the useUncontrolledState hook, providing methods to set it to true, false, or toggle between them.

Loading...

Installation

pnpm dlx shadcn@latest add https://usekit.kiron.dev/k/use-uncontrolled-state

Usage

"use client"
 
import { useUncontrolledState } from "@/hooks/use-uncontrolled-state"
 
export function Component() {
  const [value, setValue] = useUncontrolledState({
    defaultProp: "Initial text",
    onChange: (newValue) => console.log("Value changed:", newValue),
  })
 
  return (
    <input
      type="text"
      value={value ?? ""}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type here..."
    />
  )
}

API Reference

Parameters

NameTypeDescriptionDefault ValueOptional
defaultPropTThe initial value for the uncontrolled state.undefinedYes
onChange(state: T) => voidCallback invoked when the state changes (if the new state is different and not undefined).undefinedYes

Return Values

NameTypeDescription
stateT | undefinedThe current uncontrolled state value, initialized with defaultProp.
setState(value: React.SetStateAction<T | undefined>) => voidA memoized function to update the state. Accepts a new value or a function that receives the previous state and returns the new state.
useToggleuseUnmount