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>neveropen</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>neveropen</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/
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
