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