Marigold
Getting StartedFoundationsComponentsPatternsReleases
Discover new Tutorials!

Components

Overview

Application

MarigoldProvider
RouterProvider

Layout

Aside
Aspect
Breakout
Center
Columns
Container
Grid
Inline
Inset
Scrollable
Split
Stack
Tiles

Actions

Button
Link
LinkButton
beta

Form

Autocomplete
Calendar
Checkbox
ComboBox
DateField
DatePicker
Form
Multiselect
NumberField
Radio
SearchField
Select
Slider
Switch
TextArea
TextField
TimeField

Collection

SelectList
Table
Tag

Navigation

Accordion
Breadcrumbs
Pagination
Tabs

Overlay

ContextualHelp
Dialog
Drawer
beta
Menu
Toast
beta
Tooltip

Content

Badge
Card
Divider
Headline
Icon
List
SectionMessage
SVG
Text
VisuallyHidden
XLoader

Formatters

DateFormat
NumericFormat

Hooks and Utils

cn
cva
extendTheme
parseFormData
useAsyncListData
useListData
useResponsiveValue
useTheme

useListData

Manages state for an immutable list data structure, and provides convenience methods to update the data over time.

We use the useListData hook from react-spectrum stately package.

The hook helps manage an immutable list data structure, with helper methods to update the data in an efficient way. Since the data is stored in React state, calling these methods to update the data automatically causes the component to re-render accordingly.

More information can be found in the react-spectrum documentation.

Usage

Import

To import the hook you just have to use this code below.

import { useListData } from '@marigold/components';

Examples

Table with input field

This example show how to update data inside a table.

Preview
Code
NameFirstnameHouseYear of birth
PotterHarry
1980
MalfoyDraco
1980
DiggoryCedric
1977
LovegoodLuna
1981
Last update: June 28, 2024
Build with 🥵, 🧡 and
v15.4.1