Skip to main content
Version: Next

Category

You can categorize your items easily.

const [items, setItems] = useState([
  {label: 'North America', value: 'na'},
  {label: 'United States', value: 'usa', parent: 'na'},
  {label: 'Canada', value: 'canada', parent: 'na'},

  {label: 'Europe', value: 'eu'},
  {label: 'Norway', value: 'norway', parent: 'eu'},
  {label: 'Belgium', value: 'belgium', parent: 'eu'},
]);

The children have the parent's value as their parent key.

note

The items don't need to be sorted, This will be done automatically.

Props

categorySelectable

Specifies if the categories can be selected.

categorySelectable={true}
TypeDefault
boolfalse

Styling

listParentContainerStyle

listParentContainerStyle={{
  justifyContent: "center",
  alignItems: "center"
}}

listParentLabelStyle

listParentLabelStyle={{
  fontWeight: "bold"
}}

listChildContainerStyle

listChildContainerStyle={{
  paddingLeft: 20
}}

listChildLabelStyle

listChildLabelStyle={{
  color: "grey"
}}