npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

closure-react-list

v0.7.9

Published

Material Components React List

Downloads

1

Readme

React List

A React version of an MDC List.

Installation

npm install @material/react-list

Usage

Styles

with Sass:

import '@material/react-list/index.scss';

with CSS:

import "@material/react-list/dist/list.css";

Javascript Instantiation

import React, {Component} from 'react';
import List, {ListItem, ListItemText} from '@material/react-list';

class MyApp extends Component {
  render() {
    return (
      <List>
        <ListItem>
          <ListItemText primaryText='Photos'/>
        </ListItem>
        <ListItem>
          <ListItemText primaryText='Recipes'/>
        </ListItem>
        <ListItem>
          <ListItemText primaryText='Work'/>
        </ListItem>
      </List>
    );
  }
}

NOTE: Please use the ListItem component to specify list items. List will not recognize custom list item components.

Also, you can override the element that the List or ListItem renders by passing in a tag prop. By default, List renders a ul and ListItem renders an li. For semantic HTML and a11y, as well as working with routing libraries such as React Router and Next.js' Link, you may wish to use nav and a respectively if using the components to render a page's navigation.

Variants

Two-Line List

You can use the twoLine Boolean prop for List combined with the secondaryText prop for ListItem to style a list as a double line list.

import React, {Component} from 'react';
import List, {ListItem, ListItemText} from '@material/react-list';

class MyApp extends React.Component {
  render() {
    return (
      <List twoLine>
        <ListItem>
          <ListItemText
            primaryText='Photos'
            secondaryText='Jan 9, 2018' />
        </ListItem>
        <ListItem>
          <ListItemText
            primaryText='Recipes'
            secondaryText='Jan 17, 2018' />
        </ListItem>
        <ListItem>
          <ListItemText
            primaryText='Work'
            secondaryText='Jan 28, 2018' />
        </ListItem>
      </List>
    );
  }
}

List item supporting visuals and metadata

You may add a leading visuals or trailing metadata to a list item using ListItemGraphic before or ListItemMeta after ListItemText.

import React, {Component} from 'react';
import List, {ListItem, ListItemGraphic, ListItemText, ListItemMeta} from '@material/react-list';

class MyApp extends Component {
  render() {
    return (
      <List>
        <ListItem>
          <ListItemGraphic graphic={<MaterialIcon icon='folder'/>} />
          <ListItemText primaryText='Photos' />
          <ListItemMeta meta='info' />
        </ListItem>
        ...
      </List>
    );
  }
}

List groups and list dividers

Multiple related lists can be grouped together using the ListGroup component. Optional subheaders can be added using ListGroupSubheader. ListDividers can be used to separate content either within a list or between lists.

import React, {Component} from 'react';
import List, {ListItem, ListItemText, ListGroup, ListGroupSubheader} from '@material/react-list';

class MyApp extends Component {
  render() {
    return (
      <ListGroup>
        <ListGroupSubheader tag='h2'>Folders</ListGroupSubheader>
        <List>
          <ListItem><ListItemText primaryText='Photos' /></ListItem>
          ...
        </List>
        <ListDivider />
        <ListGroupSubheader tag='h2'>Recent Files</ListGroupSubheader>
        <List>
          <ListItem><ListItemText primaryText='Vacation' /></ListItem>
          ...
        </List>
      </ListGroup>
    );
  }
}

Single Selection

You can use the singleSelection Boolean prop for List to allow for selection of list items. You can also set the selectedIndex of the list programmatically and include a handleSelect callback.

NOTE: If you are inserting or removing list items, you must update the selectedIndex accordingly.

class MyApp extends React.Component {
  state = {
    selectedIndex: 1,
  };

  render() {
    return (
      <List
        singleSelection
        selectedIndex={this.state.selectedIndex}
        handleSelect={(selectedIndex) => this.setState({selectedIndex})}
      >
        <ListItem>
          <ListItemText primaryText='Photos'/>
        </ListItem>
        <ListItem>
          <ListItemText primaryText='Recipes'/>
        </ListItem>
        <ListItem>
          <ListItemText primaryText='Work'/>
        </ListItem>
      </List>
    );
  }
}

Props

List

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list element nonInteractive | Boolean | Disables interactivity affordances dense | Boolean | Styles the density of the list, making it appear more compact avatarList | Boolean | Configures the leading tiles of each row to display images instead of icons. This will make the graphics of the list items larger twoLine | Boolean | Styles the list with two lines singleSelection | Boolean | Allows for single selection of list items wrapFocus | Boolean | Sets the list to allow the up arrow on the first element to focus the last element of the list and vice versa selectedIndex | Number | Toggles the selected state of the list item at the given index handleSelect | Function(selectedIndex: Number) => void | Callback for handling a list item selection event aria-orientation | String | Indicates the list orientation tag | String | Customizes the list tag type (defaults to 'ul')

ListItem

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list item element classNamesFromList | Array | Additional classes to be applied to the list item element, passed down from list attributesFromList | Additional attributes to be applied to the list item element, passed down from list childrenTabIndex | Number | Tab index to be applied to all children of the list item shouldFocus | Whether to focus the list item shouldFollowHref | Whether to follow the link indicated by the list item shouldToggleCheckbox | Whether to toggle the checkbox on the list item onClick | Function(evt: Event) => void | Callback for handling a click event onKeyDown | Function(evt: Event) => void | Callback for handling a keydown event onFocus | Function(evt: Event) => void | Callback for handling a focus event onBlur | Function(evt: Event) => void | Callback for handling a blur event tag | String | Customizes the list tag type (defaults to 'li')

ListItemText

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list item text element tabIndex | Number | Tab index of the list item text tabbableOnListItemFocus | Boolean | Whether focusing list item will toggle tab index of the list item text. If false, the tab index will always be -1 primaryText | String | Primary text for the list item secondaryText | String | Secondary text for the list item

ListItemGraphic

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list item graphic element tabIndex | Number | Tab index of the list item graphic tabbableOnListItemFocus | Boolean | Whether focusing list item will toggle tab index of the list item graphic. If false, the tab index will always be -1 graphic | Element | The graphic element to be displayed in front of list item text

ListItemGraphic

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list item meta element tabIndex | Number | Tab index of the list item meta tabbableOnListItemFocus | Boolean | Whether focusing list item will toggle tab index of the list item meta. If false, the tab index will always be -1 meta | Element or String | The meta element or string to be displayed behind list item text

ListDivider

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list divider tag | String | Element tag of the list divider, defaults to li role | String | ARIA role of the list divider, defaults to separator

ListGroup

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list group tag | String | Element tag of the list group, defaults to div

ListGroupSubheader

Prop Name | Type | Description --- | --- | --- className | String | Classes to be applied to the list group subheader tag | String | Element tag of the list group subheader, defaults to h3

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins