@npm.tangocode/tc_ui_components/src/documentation/List.md

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

## List ##

### Description ###

A list component that can load more items with a button or reaching the end of the list

### Props ###

1. __showLoadMoreButton ?__ (boolean): Flag to show or not the Load More button

2. __handleItemClick ?__ (function): Function to be called every time the user clicks on a list item

3. __handleShowMore ?__ (function): The callback function that notifies that the load more button was clicked or the bottom of the list was reached

4. __customLoadingAnimation ?__ (any): Is the loading animation that is shown when the component is waitng for the data

5. __status ?__  (String): String that represents the status of the component. If the string value is equal to "LOADING" a loading animation will be displayed

6. __styles ?__ (List.Styles):  Custom stylings that will overwrite the default styles. Must be an object of styled components with properties that match one or several of the options below.

    * ListItemsContainer
        - Is the Div container of the list, display, flex-direction and width can be customized.

    * MemberList
        - This is the list style.

    * LoadMoreButton
        - Custom div for the load more button (showLoadMoreButton = true)

    * LoadMoreButtonContainer
        - Container div for the button

     ```ts
        styles={{
            ListItemsContainer?: <styled component>;
            MemberList?: <styled component>;
            LoadMoreButton?: <styled component>;          
            LoadMoreButtonContainer?: <styled component>;
        }};
    ```



7. __id ?__ (string): A prefix id for all the html elements of the component

8. __name ?__ (string): A prefix name for all the html elements of the component

9. __onScroll ?__ (function(e)): Function executed when the user scrolls



### Usage ###

```jsx
    const list = [
            { name: 'one' }, { name: 'two' },
            { name: '3' }, { name: '4' }
        ];
    <List numberOfItems={4} showLoadMoreButton={false} handleItemClick={this.handleItemClick} 
    handleShowMore={this.handleShowMore}>
        {
            list.map((item, i) => {
                return (
                    <ListItem
                        key={i}
                        index={i}
                        item={item}
                        onEditClick={this.handleEditItemClick}
                    />
                );
            })
        }
    </List>
```

### Styling ###

```jsx
  const newStyles = {
        LoadMoreButton: styles.list.LoadMoreButton.extend`
            font-family: Jaldi;
            font-size: 16px;   `
    }

    render() {
        return (
              <div style={{ width: '400px' }}>
                <List numberOfItems={4} showLoadMoreButton={false} handleItemClick={this.handleItemClick} 
                    handleShowMore={this.handleShowMore}>
                    {
                        list.map((item, i) => {
                            return (
                                <ListItem
                                    key={i}
                                    index={i}
                                    item={item}
                                    onEditClick={this.handleEditItemClick}
                                />
                            );
                        })
                    }
                </List>
             </div>
        )
        }
```