Material UI is a Material Design library made for React.
It’s a set of React components that have Material Design styles.
In this article, we’ll look at how to customize lists with Material UI.
List Controls
We can add form controls to list items.
To do that, we can write:
import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
export default function App() {
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
return (
<List>
{[0, 1, 2, 3].map(value => {
return (
<ListItem
key={value}
role={undefined}
dense
button
onClick={handleToggle(value)}
>
<ListItemIcon>
<Checkbox
edge="start"
checked={checked.indexOf(value) !== -1}
tabIndex={-1}
disableRipple
/>
</ListItemIcon>
<ListItemText primary={` item ${value + 1}`} />
</ListItem>
);
})}
</List>
);
}
to add a list with items that have a check on the left side.
We added the Checkbox inside the ListItemIcon .
The edge set to start indicates that it stays on the left side.
The onClick prop is on the ListItem .
The handleToggle function returns a function that adds the index of the checked item to the checked state.
We see if it’s checked by checking if the index is already in the checked array.
If it is, then it’s checked.
Otherwise, it’s not.
If it’s not checked, then the index is pushed into the new array.
Otherwise, we remove the item with splice from the array.
Then we call setChecked to set the state.
And then we can set the checked value of each checkbox in the checked prop of the Checkbox .
We can also add the checkbox as a secondary action:
import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
export default function App() {
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
return (
<List>
{[0, 1, 2, 3].map(value => {
return (
<ListItem key={value} button>
<ListItemAvatar>
<Avatar
alt={`cat ${value + 1}`}
src="http://placekitten.com/200/200"
/>
</ListItemAvatar>
<ListItemText primary={`item ${value + 1}`} />
<ListItemSecondaryAction>
<Checkbox
edge="end"
onChange={handleToggle(value)}
checked={checked.indexOf(value) !== -1}
/>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}
We have the items listed as we do in the previous example.
ListItemAvatar displays the avatar on the left side.
And ListItemSecondaryAction displays the checkbox on the right side.
edge is set to end to display the checkbox on the right side.
The logic for the checkbox is the same.
Switch
We can add switches to a list item.
For example, we can write:
import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import Switch from "@material-ui/core/Switch";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
export default function App() {
const [checked, setChecked] = React.useState([0]);
const handleToggle = value => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
return (
<List>
{[0, 1, 2, 3].map(value => {
return (
<ListItem key={value} button>
<ListItemAvatar>
<Avatar
alt={`cat ${value + 1}`}
src="http://placekitten.com/200/200"
/>
</ListItemAvatar>
<ListItemText primary={` item ${value + 1}`} />
<ListItemSecondaryAction>
<Switch
edge="end"
onChange={handleToggle(value)}
checked={checked.indexOf(value) !== -1}
/>
</ListItemSecondaryAction>
</ListItem>
);
})}
</List>
);
}
to add a switch to each list item on the right side.
All we did is replace the Checkbox with a Switch .
They take the same props.
Conclusion
We can add controls to the left or right side of the list item.
Also, we can add avatars on the left side of the list item.
Checkboxes and switches can be toggled on and off.
