react-list-hooks

React Components for handling item selection in a list. This is based on compound components pattern with hooks and context where state is implicitly handled.

Demo

You can customize your list styling and add sub lists to any level down. No need to worry about the state, that will be handled by react-list-hooks.

Check box list	Button List

Getting Started

General prerequisites

• React 16.8+

Installation

See npm documentation on how to get started with npm.

npm install --save react-list-hooks

Using

Basic usage example

Import into your React project and render a list:

//CSS File
.is-disabled {pointer-event: none; opacity: 0.5;}

//JS File
import { ListContext, List, ListItem, ToggleSubList, ToggleListItem } from 'react-list-hooks';

const TextWithCheckBox = ({isSelected, id, displayValue, customClass}) => {
    const {updateList} = useContext(ListContext);
    return (
        <div className={customClass} onClick={() => updateList(id)}>
            <input type="checkbox" checked={isSelected} />
            <span>{displayValue}</span>
        </div>
    )
};

class App extends Component {
  render() {
    return (
      <div>  
          <h1>Fruits List</h1>  
           <List>
                <ListItem id='apple'>
                    <TextWithCheckBox displayValue='Apple' />
                </ListItem>
                    {/*Sub List enable/disable based on parent list item id*/}
                    <ToggleSubList whenActive='apple' disableClass='is-disabled'>
                        <List customClass='sub-list'>
                            <ListItem id='red'>
                                <TextWithCheckBox displayValue='Red Apple' />
                            </ListItem>
                            <ListItem id='green'>
                                <TextWithCheckBox displayValue='Green Apple' />
                            </ListItem>
                        </List>
                    </ToggleSubList>
                <ListItem id='banana'>
                    <TextWithCheckBox displayValue='Banana' />
                </ListItem>
                <ListItem id='orange'>
                    <TextWithCheckBox displayValue='Orange' />
                </ListItem>
                {/*List Item enable/disable based on sibling list item id*/}
                <ToggleListItem id='sour' whenActive='orange' disableClass='is-disabled'>
                    <ListItem id='sour'>
                        <TextWithCheckBox displayValue='Sour Orange' />
                    </ListItem>
                </ToggleListItem>
            </List>
      </div>
    );
  }
}

export default App;

Components

• List - A component that renders the list of items.

  Available options with example values:

    <List 
        initialState = {[1, 3, 10]}
        onListUpdate = {(list) => console.log('Selected Items', list)}
        clearList = {false}
        customClass = 'has-green-background'
    >
        <ListItem>...</ListItem>
    </List>
  

  Options Detail:

  Parameter	Type	Required	Defaults	Description
  initialState	Array	no	[]	Array of pre-selected items.
  onListUpdate	Funtion	no	-	Passed function will call each type list updates.
  clearList	Boolean	no	false	Prop passed to clear the list
  customClass	String	no	-	Custom class for the list wrapper div.

• ListItem - A component that renders a single item in a list. Anyone can select/deselect list from it's children component.

  Available options with example values:

    <ListItem id = {1}>
    ...    
    </ListItem>
  

  Options Detail:

  Parameter	Type	Required	Defaults	Description
  id	Any	yes	-	Unique item id.

• ToggleSubList - A component that enable/disable a sub list based on its parent list item ID.

  Available options with example values:

    <ToggleSubList whenActive={2} disableClass='is-disabled'>
        <List>...</List>    
    </ToggleSubList>
  

  Options Detail:

  Parameter	Type	Required	Defaults	Description
  whenActive	Any	yes	-	Pass parent item id to this prop to enable/disable a sublist.
  disableClass	string	no	-	Sub list disable class e.g 'is-display-none'.

• ToggleListItem - A component that enable/disable a item in a same list based on its sibling item ID.

  Available options with example values:

    <ToggleListItem id='apple' whenActive='fruits' disableClass='is-disabled'>
        <ListItem>...</ListItem> 
    </ToggleListItem>
  

  Options Detail:

  Parameter	Type	Required	Defaults	Description
  id	Any	yes	-	List Item Id (you want to disable).
  whenActive	Any	yes	-	Pass sibling item id to this prop to enable/disable a list item.
  disableClass	string	no	-	List item disable class e.g 'is-disabled'.