UseControlledList

Last Updated: 2.0.0 (22/01/2024)

useControlledList allows lists of a particular type to be controlled through a unified API.

The type modifier passed in with the hook determines what type of items the hook will control. By default, this is string.

Usage

import { useControlledList, Button, Text } from "@valence-ui/core";

function MyComponent() { 
    const controlledList = useControlledList<string>(["hello", "world"]);
    
    return ( 
        <>
            {controlledList.items.map((item, index) => (
                <Text
                    key={index}
                >
                    {item}
                </Text>
            ))}
            
            <Button
                onClick={() => controlledList.add("there")}
            >
                Add "there"
            </Button>
            
            <Button
                onClick={() => controlledList.remove("world")}
            >
                Remove "world"
            </Button>
            
            <Button
                onClick={() => controlledList.clear()}
            >
                Clear
            </Button>
        </>
    )
}

Return type

Attribute	Type	Description
items	T[]	The list of items.
add	(item: T) => void	Add an item to the list.
remove	(item: T) => void	Remove an item from the list.
update	(items: T[]) => void	Override all items in the list.
clear	() => void	Clear the list.
includes	(item: T) => boolean	Whether the list includes an item.