Open In App

React MUI Transfer List Input

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Javascript




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.

Javascript




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/



Last Updated : 17 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads