dha-dual-list

A split list component to show two lists side by side and allow user to move items from one list to another.

Getting Started

Install

Install from npm:

• npm i dha-dual-list

Caveats

This module uses tailwindcss to style the component. Tailwind is known to inject some global styles that may interfere with MaterialUI. We have tried to prevent most of the global styles from being generated, but if you notice that styles break on your app after installing this module, let someone on the SDK know.

DualList Component

DualList Item

• value: string
• label: string

DualList Props:

• available: Array<DualListItem>: The array of items for the left array

• selected: Array<DualListItem>; The array of items for the left array

• className?: string; Any Additional CSS Classes you may want on the outer list

• leftLabel?: string; Label for the left list

• rightLabel?: string; Label for the right list

• onMove: (array: Array<DualListItem>) => void; Fires every time an item is moved from one list to another via the buttons

• onSelectInLeftList?: (array: Array<DualListItem>) => void; Fires every time an item is clicked in the left list.

• onSelectInRightList?: (array: Array<DualListItem>) => void; Fires every time an item is clicked in the right list.

Home.tsx - Functional component

import { useState } from 'react';
import { DualList } from 'dha-dual-list';
import type { DualListItem } from 'dha-dual-list';

const Home = () => {
  const [available] = useState<Array<DualListItem>>([
    { value: 'a', label: 'a' },
    { value: 'b', label: 'b' },
    {
      value: 'c',
      label: 'c',
    },
  ]);
  const [selected, setSelected] = useState<Array<DualListItem>>([]);

  return (
    <div>
      <DualList
        available={available}
        selected={selected}
        onMove={(selectedItems: DualListItem[]) => {
          setSelected([...selectedItems]);
        }}
      />
    </div>
  );
};

export default Home;