MaterialR List

@materialr/list

React Material list implementation.

Installation

$ npm install --save @materialr/list

Demo

A full demo is available on the MaterialR website showcasing all variants.

Components

Named exports

import { List } from '@materialr/list';

Props

| Prop | Type | Required | Default | Description | | ----------- | --------------- | -------- | --------- | ---------------------------------------------------- | | avatar | bool | No | false | Whether the list contains avatar as opposed to icons | | children | node | Yes | N/A | The child elements to render inside the list | | className | string | No | undefined | Additional classNames to add | | dense | bool | No | false | Whether a dense list is to be rendered | | display | enum (list/nav) | No | list | Whether to render a list (<ul>) or nav (<nav>) | | twoLines | bool | No | false | Whether this is a list with two-line list items |

import { ListGroup } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ----------- | -------- | --------- | ----------------------------- | | children | node | Yes | undefined | The children to render within | | className | string | No | undefined | Additional classNames to add |

import { ListGroupSubheader } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ----------- | -------- | --------- | ---------------------------- | | className | string | No | undefined | Additional classNames to add | | title | string | Yes | undefined | The title to render within |

import { ListItem } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------------- | ----------- | -------- | --------- | ------------------------------------------------------- | | activated | bool | No | false | Whether this item is activated | | AnchorComponent | func | No | undefined | A React component to render instead of an <a> element | | anchorProps | shape | No | {} | Additional props to pass to the anchor component | | className | string | No | undefined | Additional classNames to add | | children | node | Yes | undefined | The children to render within | | href | string | No | undefined | The url where the list item should navigate to |

import { listItemDivider } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ------ | -------- | --------- | ------------------------------------------ | | className | string | No | undefined | Additional classNames to add | | inset | bool | No | false | Whether the divider is inset from the side |

import { ListItemGraphic } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ----------- | ---------------- | --------- | ---------------------------- | | avatar | string | without icon | undefined | An avatar image to render | | className | string | No | undefined | Additional classNames to add | | icon | string | without avatar | undefined | A material icon to render | | title | string | with avatar | undefined | A title to add to an avatar |

import { listItemMeta } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ----------- | -------- | --------- | ---------------------------- | | className | string | No | undefined | Additional classNames to add | | icon | string | Yes | N/A | A material icon to render | | onClick | func | No | undefined | A click handler method | | title | string | Yes | N/A | The title attribute |

import { ListItemSecondaryText } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ------ | -------- | --------- | ---------------------------- | | className | string | No | undefined | Additional classNames to add | | text | string | Yes | N/A | The text to add |

import { ListItemText } from '@materialr/list';

| Prop | Type | Required | Default | Description | | ----------- | ----------- | -------- | --------- | ----------------------------- | | children | node | Yes | undefined | The children to render within | | className | string | No | undefined | Additional classNames to add |