Saaj UI

useControllableState

A hook for managing controllable and uncontrollable states seamlessly.

Installation

npx saaj add useControllableState

Usage

MyComponent.tsx
import React from 'react';
import { Button, Text, View } from 'react-native';
 
import { useControllableState } from '@/hooks/useControllableState';
 
type MyComponentProps = {
    defaultValue?: boolean;
    value?: boolean;
    onValueChange?: (value: boolean) => void;    
}
 
export function MyComponent({
    defaultValue,
    value,
    onValueChange
}: MyComponentProps) {
    const [open, setOpen] = useControllableState({
        defaultValue: defaultValue ?? false,
        controlledValue: value,
        onControlledChange: onValueChange
    });
 
    return (
        <View>
            <Button title="Toggle" onPress={() => setOpen(!open)} />
            {open && <Text>Hello World!</Text>}
        </View>
    )
}

On this page