React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.
In this article, we’ll be discussing React MUI Transfer List Input. A Transfer List or a shuttle that allows the user to move one or more list items between lists.
React MUI Checkbox Props:
- checked: It determines whether the component is checked.
- checkedIcon: It denotes the icon to display when the component is checked.
- classes: It denotes the styles to override the default ones.
- color: It denotes the color of the component.
- defaultChecked: It determines whether the component is checked by default.
- disabled: It determines whether the component is disabled.
- disableRipple: It determines whether the ripple effect is disabled on the component.
- icon: It denotes the icon to display when the component is unchecked.
- id: It denotes the id of the input element.
- indeterminate: It determines whether the component is in an indeterminate state.
- indeterminateIcon: It denotes the icon to display when the component is in an indeterminate state.
- inputProps: It denotes the list of attributes applied to the input element.
- inputRef: It denotes a ref that is passed to the input element.
- onChange: It denotes a callback function that is triggered when the state of the checkbox is changed.
- required: It determines whether the input element is required.
- size: It denotes the size of the component.
- sx: It denotes a system prop that allows defining system overrides as well as additional CSS styles.
- value: It denotes the value of the component.
React MUI List Props:
- children: It is used to set the content of the component.
- classes: This overrides the existing styles or adds new styles to the component.
- component: This is used to access the root node.
- dense: If set to true, the content padding is reduced and the children appear closer. The default value is false.
- disablePadding: If set to true, vertical padding is removed from the list. The default value is false.
- subheader: The subheader’s content, which is often ListSubheader.
- sx: The system prop allows defining system overrides as well as additional CSS styles.
React MUI ListItem Props:
- classes: This overrides the existing styles or adds new styles to the component.
- alignItems: It states the align-items style property. The default value is the center.
- autoFocus: If set to true, the list item is focused during the first mount.
- children: The content of the component.
- component: It is the component used for the root node.
- components: It is the components used for each slot inside the InputBase.
- componentsProps: It is the props used for each slot inside the Input.
- dense: If set to true, compact vertical padding designed for keyboard and mouse input is used.
- disabled: If set to true, the component is disabled. The default value is set to false.
- disableGutters: If set to true, the left and right padding are removed.
- disablePadding: If set to true, all the paddings are removed.
- divider: If set to true, a 1px light border is added to the bottom of the list item.
- secondaryAction: It is the element to be displayed at the end of the list.
- selected: If set to true, applies selected styling.
- sx: The system prop allows defining system overrides as well as additional CSS sty less.
- button: If true, the list item is a button. Props intended for ButtonBase can then be applied to ListItem.
React MUI Button Props:
- children: It is used to set the content of the button.
- classes: It is to override or extend the styles applied to the component.
- size: It is used to customize the size of the button.
- disableElevation: It is the boolean value to determine the elevation for the button.
- fullWidth: It is the boolean value that determines whether it covers the entire width of the container or not.
- disabled: It is the Boolean value to enable or disable the button.
- disableElevation: It is the boolean value to enable or disable the button’s elevated appearance.
- disableFocusRipple: It is the boolean value to enable or disable the keyboard focus ripple effect.
- startIcon: Element before the children.
- endIcon: Element after the children.
- href: Its URL to link to when the button is clicked.
- color: It is the color of the component.
- disableRipple: It is the boolean value to disable or enable the ripple effect.
Creating React Project:
Step 1: To create a react app, you need to install react modules through npm command.
npm create-react-app project name
Step 2: After creating your react project, move into the folder to perform different operations.
cd project name
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install @mui/material @emotion/react @emotion/styled
Project Structure:
Step to Run Application:
npm start
Example 1: Below example demonstrates the React MUI Transfer List Input.
import React from "react" ;
import Grid from "@mui/material/Grid" ;
import List from "@mui/material/List" ;
import ListItem from "@mui/material/ListItem" ;
import ListItemIcon from "@mui/material/ListItemIcon" ;
import ListItemText from "@mui/material/ListItemText" ;
import Checkbox from "@mui/material/Checkbox" ;
import Button from "@mui/material/Button" ;
import Paper from "@mui/material/Paper" ;
function not(a, b) {
return a.filter((value) => b.indexOf(value) === -1);
} function intersection(a, b) {
return a.filter((value) => b.indexOf(value) !== -1);
} function App() {
const [checked, setChecked] = React.useState([]);
const [left, setLeft] = React.useState([0, 1, 2]);
const [right, setRight] = React.useState([3, 4, 5]);
const leftChecked = intersection(checked, left);
const rightChecked = intersection(checked, right);
const handleToggle = (value) => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const handleAllRight = () => {
setRight(right.concat(left));
setLeft([]);
};
const handleCheckedRight = () => {
setRight(right.concat(leftChecked));
setLeft(not(left, leftChecked));
setChecked(not(checked, leftChecked));
};
const handleCheckedLeft = () => {
setLeft(left.concat(rightChecked));
setRight(not(right, rightChecked));
setChecked(not(checked, rightChecked));
};
const handleAllLeft = () => {
setLeft(left.concat(right));
setRight([]);
};
const customList = (items) => (
<Paper sx={{ width: 200, height: 180, overflow: "auto" }}>
<List dense component= "div" role= "list" >
{items.map((value) => {
const labelId = `transfer-list-item-${value}-label`;
return (
<ListItem
key={value}
role= "listitem"
button
onClick={handleToggle(value)}
>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value)
!== -1}
tabIndex={-1}
disableRipple
color= "success"
inputProps={{
"aria-labelledby" : labelId,
}}
/>
</ListItemIcon>
<ListItemText id={labelId} primary=
{`Item ${value + 1}`} />
</ListItem>
);
})}
<ListItem />
</List>
</Paper>
);
return (
<div>
<div style={{ textAlign: "center" , color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Transfer List Input</h2>
</div>
<div style={{ textAlign: "center" }}>
<Grid container spacing={2}
justifyContent= "center" alignItems= "center" >
<Grid item>{customList(left)}</Grid>
<Grid item>
<Grid container direction= "column"
alignItems= "center" >
<Button
sx={{ my: 0.5 }}
variant= "contained"
color= "success"
size= "medium"
onClick={handleAllRight}
disabled={left.length === 0}
aria-label= "move all right"
>
≫
</Button>
<Button
sx={{ my: 0.5 }}
variant= "outlined"
color= "success"
size= "medium"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label= "move selected right"
>
>
</Button>
<Button
sx={{ my: 0.5 }}
variant= "outlined"
color= "success"
size= "medium"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label= "move selected left"
>
<
</Button>
<Button
sx={{ my: 0.5 }}
variant= "contained"
color= "success"
size= "medium"
onClick={handleAllLeft}
disabled={right.length === 0}
aria-label= "move all left"
>
≪
</Button>
</Grid>
</Grid>
<Grid item>{customList(right)}</Grid>
</Grid>
</div>
</div>
);
} export default App;
|
Output:
Example 2: Below example demonstrates the React MUI Transfer List Input and displays the number of choices selected.
import React from "react" ;
import Grid from '@mui/material/Grid' ;
import List from '@mui/material/List' ;
import Card from '@mui/material/Card' ;
import CardHeader from '@mui/material/CardHeader' ;
import ListItem from '@mui/material/ListItem' ;
import ListItemText from '@mui/material/ListItemText' ;
import ListItemIcon from '@mui/material/ListItemIcon' ;
import Checkbox from '@mui/material/Checkbox' ;
import Button from '@mui/material/Button' ;
import Divider from '@mui/material/Divider' ;
function not(a, b) {
return a.filter((value) => b.indexOf(value) === -1);
} function intersection(a, b) {
return a.filter((value) => b.indexOf(value) !== -1);
} function union(a, b) {
return [...a, ...not(b, a)];
} function App() {
const [checked, setChecked] = React.useState([]);
const [left, setLeft] = React.useState([0, 1, 2]);
const [right, setRight] = React.useState([3, 4, 5]);
const leftChecked = intersection(checked, left);
const rightChecked = intersection(checked, right);
const handleToggle = (value) => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const numberOfChecked = (items) =>
intersection(checked, items).length;
const handleToggleAll = (items) => () => {
if (numberOfChecked(items) === items.length) {
setChecked(not(checked, items));
} else {
setChecked(union(checked, items));
}
};
const handleCheckedRight = () => {
setRight(right.concat(leftChecked));
setLeft(not(left, leftChecked));
setChecked(not(checked, leftChecked));
};
const handleCheckedLeft = () => {
setLeft(left.concat(rightChecked));
setRight(not(right, rightChecked));
setChecked(not(checked, rightChecked));
};
const customList = (title, items) => (
<Card>
<CardHeader
sx={{ px: 2, py: 1 }}
avatar={
<Checkbox
onClick={handleToggleAll(items)}
checked={numberOfChecked(items) ===
items.length && items.length !== 0}
indeterminate={
numberOfChecked(items) !==
items.length && numberOfChecked(items) !== 0
}
disabled={items.length === 0}
inputProps={{
'aria-label' : 'all items selected' ,
}}
color= "success"
/>
}
title={title}
subheader={`${numberOfChecked(items)}/${items.length}
selected`}
/>
<Divider />
<List
sx={{
width: 200,
height: 230,
bgcolor: 'background.paper' ,
overflow: 'auto' ,
}}
dense
component= "div"
role= "list"
>
{items.map((value) => {
const labelId =
`transfer-list-all-item-${value}-label`;
return (
<ListItem
key={value}
role= "listitem"
button
onClick={handleToggle(value)}
>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value)
!== -1}
tabIndex={-1}
color= "success"
disableRipple
inputProps={{
'aria-labelledby' : labelId,
}}
/>
</ListItemIcon>
<ListItemText id={labelId}
primary={`Item ${value + 1}`} />
</ListItem>
);
})}
<ListItem />
</List>
</Card>
);
return (
<div>
<div style={{ textAlign: "center" , color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Transfer List Input</h2>
</div>
<div style={{ textAlign: "center" }}>
<Grid container spacing={2} justifyContent= "center" alignItems= "center" >
<Grid item>{customList( 'Choices' , left)}</Grid>
<Grid item>
<Grid container direction= "column" alignItems= "center" >
<Button
sx={{ my: 0.5 }}
variant= "contained"
size= "medium"
color= "success"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label= "move selected right"
>
>
</Button>
<Button
sx={{ my: 0.5 }}
variant= "contained"
color= "success"
size= "medium"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label= "move selected left"
>
<
</Button>
</Grid>
</Grid>
<Grid item>{customList( 'Chosen' , right)}</Grid>
</Grid>
</div>
</div>
);
} export default App;
|
Output:
Reference: https://mui.com/material-ui/react-transfer-list/