@myntra/uikit-component-list v1.13.96

import List from './src/list'

List

const items = [
  'Foo',
  'Bar',
  'Baz',
];

const [value, setValue] = useState(null);

<List
  items={items}
  value={value}
  onChange={value => setValue(value)}
  multiple>

  {({ item }) => <span>{item}</span>}

</List>

Examples

Read-only List

const items = [
  'Foo',
  'Bar',
  'Baz',
];

<List items={items}>

  {({ item }) => <span>{item}</span>}

</List>

Single Selection List

TODO: Add keybord shortcuts.

const items = [
  'Foo',
  'Bar',
  'Baz',
];

const [value, setValue] = useState(null);

<List
  items={items}
  value={value}
  onChange={value => setValue(value)}>

  {({ item }) => <span>{item}</span>}

</List>

Multiple Selection List

TODO: Add keybord shortcuts.

const items = [
  'Foo',
  'Bar',
  'Baz',
];

const [value, setValue] = useState(null);

<List
  items={items}
  value={value}
  onChange={value => setValue(value)}
  multiple>

  {({ item }) => <span>{item}</span>}

</List>

Multiple selection list with disabled items

const items = [
  'Foo',
  'Bar',
  'Baz',
];

const [value, setValue] = useState(null);

<List
  items={items}
  value={value}
  onChange={value => setValue(value)}
  isItemDisabled={item => item === 'Bar'}
  multiple>

  {({ item }) => <span>{item}</span>}

</List>