🎨
Valence
🎨
Valence
  • Overview
    • 👋Welcome to Valence
    • 🏄‍♂️Getting started
  • Core Concepts
    • Responsiveness
    • Color
      • List of colors
      • Color types
    • Polymorphism
  • Valence Core
    • 🏃‍♂️Fundamentals
      • 🎬The ValenceProvider
      • ✍️Using custom fonts
    • 🧱Components
      • 🔘Buttons
        • Button with icon
        • Grid Button
        • Text button
        • Icon button
        • Multi-part button
        • Unstyled button
        • Primitive button
      • ⌨️Inputs
        • Color Picker
        • Text input
        • Text area
        • Number input
        • Select input
        • Switch
        • Slider
        • Range slider
        • Pill selector
        • Input container
        • Dropdown container
      • 🖥️Display
        • Accordion
        • Alert
        • Color Swatch
        • Icon
        • Image
        • Avatar
        • Avatar Group
        • Loader
        • Pill
        • Spoiler
        • Stepper
        • Text
        • Title
      • 🧩Layout
        • App Container
        • Card
        • Flex
          • Flex Center
          • Styled Flex
        • Floating Toolbar
        • Grid
        • Header
        • Overflow Container
        • Space
      • 🗺️Navigation
        • App Nav
      • 🔼Overlays
        • Modal
        • Tooltip
        • Modal background
        • 📰Sheets
          • Bottom Sheet
          • Dynamic Sheet
          • Side Sheet
    • 🪝Hooks
      • UseColorScheme
      • UseColors
      • UseControlledList
      • UseDetectKeyDown
      • UseDisclosure
      • UseFloating
      • UseTooltip
      • UseBreakpoint
      • UseResponsiveProps
    • 🤚Generics
      • Generic button props
      • Generic input props
      • Generic Sheet Props
  • Valence Plugins
    • 🎠Valence Carousel
      • Carousel Child Props
  • Valence Utils
    • ✋Generics
      • Clickable
      • Events
      • Global
      • Grid
      • Layout
      • Overlay
      • Polymorphic
    • 🧜‍♀️Polymorphism
      • Polymorphic Button
      • Polymorphic Layout
      • Polymorphic Text
  • Update Notes
    • 3.0.0
    • 2.7.0
    • 2.6.0
    • 2.5.0
    • 2.4.0
    • 2.3.0
    • 2.2.0
    • 2.1.0
    • 2.0.0
Powered by GitBook
On this page
  • Usage
  • Return type

Was this helpful?

Edit on GitHub
  1. Valence Core
  2. Hooks

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.

PreviousUseColorsNextUseDetectKeyDown

Last updated 1 year ago

Was this helpful?

🪝