useControllableState

Introduction

The useControllableState hook creates a state variable that can be either controlled or uncontrolled.

Why useControllableState

This hook is useful for creating stateful components that need to handle controlled and uncontrolled scenarios.

Installation

npm install @pillar-ui/hooks
yarn add @pillar-ui/hooks

Usage

import { useControllableState } from '@pillar-ui/hooks'

function MyComponent({ controlledValue, defaultValue }) {
  const [value, setValue] = useControllableState({ controlledValue, defaultValue })
  // ...
}

Implementation details

The hook returns an array containing the current value and a setter function. If controlledValue is defined, the hook returns it and a setter function that updates it. If controlledValue is not defined, the hook returns a state variable initialized to defaultValue and a setter function that updates it.

TypeScript Support

This hook is fully typed and supports TypeScript out of the box.

Troubleshooting

If you encounter any issues while using this hook, please open an issue on the GitHub repository.

Conclusion

useControllableState is a versatile hook that simplifies handling controlled and uncontrolled state scenarios.