Skip to content

It is a Material UI based React Component that helps in selecting list of items from one list and placing them in the other.

Notifications You must be signed in to change notification settings

revanth0212/react-list-selector

Repository files navigation

react-list-selector

It is a Material UI based React Component that helps in selecting list of items from one list and placing them in the other.

Checkout the demo here.

Installation

npm install react-list-selector

Usage

import  ListSelector  from  'react-list-selector'

<ListSelector
    ref={(node) => {
    this.listSeperator = node
    }}
    unSelectedList={unSelectedList}
    selectedList={selectedList}
    style={style}
    disableHoverColor={disableHoverColor}
    unSelectedItemHoverColor={unSelectedItemHoverColor}
    selectedItemHoverColor={selectedItemHoverColor}
    hideBulkUpdateButtons={hideBulkUpdateButtons}
    SelectAllButton={<SelectAllButton />}
    UnSelectAllButton={<UnSelectAllButton />}
/>

Make sure your app is wrapped inside <MuiThemeProvider> which you can import like this: import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'.

Check out App.js for a complete example.

Props

Prop Prop Type Default Value isRequired Description
unSelectedList Array<ListItemConfig> [] true List of items that will be shown in the un selected list.
selectedList Array<ListItemConfig> [] true List of items that will be shown in the selected list.
disableHoverColor boolean false false If set, will remove hover color from both the list items.
unSelectedItemHoverColor string '' false Hover color for un selected list items.
selectedItemHoverColor string '' false Hover color for selected list items.
style Obejct {} false Style for each of the list containers.
onUnselectedItemClick (item: ListItemConfig) => void () => {} false Will be called when an un selected item has been clicked.
onSelectedItemClick (item: ListItemConfig) => void () => {} false Will be called when a selected item has been clicked.
onClick (item: ListItemConfig, selected: boolean) => void () => {} false Will be called when an item has been clicked. Returns the clicked item and also its new state, weather it was selected or not?
hideDivider boolean false false If set will hide the divider after each list item.
hideBulkUpdateButtons boolean false false Will hide Select All and UnSelect All buttons.
SelectAllButton Node null false Select All Button that will be shown instead of the default button. (Click logic will be injected into the node by the ListSelector component.)
UnSelectAllButton Node null false Unselect All Button that will be shown instead of the default button. (Click logic will be injected into the node by the ListSelector component.)
onSelectAllClick () => void () => {} false Will be called when the Select All button is clicked.
onUnSelectAllClick () => void () => {} false Will be called when the Unselect All button is clicked.

Functions

Function Name Function Type Description
getUnSelectedList () => Array<ListItemConfig> Returns the list of un selected items.
getSelectedList () => Array<ListItemConfig> Returns the list of selected items.
selectAll () => void Selects all items.
unSelectAll () => void Un selects all items.

You can find the type of ListItemConfig from the next section.

You can call these functions using the ListSelector's ref.

ListItemConfig

type ListItemConfig = {
    id: number,
    disabled: ?boolean,
    primaryText: string | Node,
    secondaryText: ?string | Node,
    style: ?Object,
}
Key Default Value isRequired Description
id 0 true Unique value that will be used to identify the item in the list.
disabled false false If set, will disable on click on the item.
primaryText '' true Text or Node that will be rendered as in the item.
secondaryText '' false Secondary Text or Node that will be rendered as in the item.
style {} false Custom styling that will be applied on the item.

About

It is a Material UI based React Component that helps in selecting list of items from one list and placing them in the other.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published