React hooks for Material UI
Install
npm install use-mui
oryarn add use-mui
Supported components
For each state, each hook accepts an optional default state and returns a
state-setting utility function (that you should not need but is available to fit
any edge cases your may have). For example: a component with a value
prop will
have an accompanying hook with an optional defaultValue
parameter property and
setValue
state property; a component with an open
prop will have an
accompanying hook with an optional defaultOpen
parameter property and
setOpen
state property.
function MyTextField() {
const { handleChange, setValue, value } = useTextField({
defaultValue: 'Loading...',
});
useEffect(() => {
getAsyncValue()
.then(asyncValue => {
setValue(asyncValue);
})
.catch(() => {
setValue('');
});
}, [setValue]);
return <TextField onChange={handleChange} value={value} />;
}
For each event handler, each hook accepts an optional callback function (that
you should not need but is available to fit any edge cases your may have; this
is particularly useful for manually monitoring logs and metrics). For example, a
component with an onChange
prop will have an accompanying hook with an
onChange
parameter property.
function MyTextField() {
const { handleChange, value } = useTextField({
onChange(e) {
alert(e.target.value);
},
});
return <TextField onChange={handleChange} value={value} />;
}
Accordion
import Accordion from '@mui/material/Accordion';
import { useAccordion } from 'use-mui';
function MyAccordion() {
const { expanded, handleChange } = useAccordion();
return <Accordion expanded={expanded} onChange={handleChange} />;
}
Autocomplete
import Autocomplete from '@mui/material/Autocomplete';
import { useAutocomplete } from 'use-mui';
function MyAutocomplete() {
const {
handleChange,
handleClose,
handleInputChange,
handleOpen,
inputValue,
open,
value,
} = useAutocomplete();
return (
<Autocomplete
inputValue={inputValue}
onChange={handleChange}
onClose={handleClose}
onInputChange={handleInputChange}
onOpen={handleOpen}
open={open}
value={value}
/>
);
}
Additionally, the useAutocomplete
hook returns a changeReason
property that
indicates why the value changed, a changeDetails
property that offers more
details about the change, an inputReason
property that indicates why the
input value changed, and a closeReason
property that indicates why the menu
closed.
BottomNavigation
import ButtomNavigation from '@mui/material/BottomNavigation';
import { useBottomNavigation } from 'use-mui';
function MyBottomNavigation() {
const { handleChange, value } = useBottomNavigation();
return <BottomNavigation onChange={handleChange} value={value} />;
}
CalendarPicker
import CalendarPicker from '@mui/lab/CalendarPicker';
import { useCalendarPicker } from 'use-mui';
function MyCalendarPicker() {
const { handleChange, handleViewChange, value, view } = useCalendarPicker();
return (
<CalendarPicker
onChange={handleChange}
onViewChange={handleViewChange}
value={value}
view={view}
/>
);
}
Checkbox
import Checkbox from '@mui/material/Checkbox';
import { useCheckbox } from 'use-mui';
function MyCheckbox() {
const { checked, handleChange } = useCheckbox();
return <Checkbox checked={checked} onChange={handleChange} />;
}
ClockPicker
import ClockPicker from '@mui/lab/ClockPicker';
import { useClockPicker } from 'use-mui';
function MyClockPicker() {
const { date, handleChange } = useClockPicker();
return <ClockPicker date={date} onChange={handleChange} />;
}
DataGridPro
import { DataGridPro } from '@mui/x-data-grid-pro';
import { useDataGridPro } from 'use-mui';
// For more information, see https://mui.com/api/data-grid/data-grid-pro/
function MyDataGridPro() {
const {
error,
handleError,
handlePageChange,
handlePageSizeChange,
handleSelectionModelChange,
handleSortModelChange,
page,
pageSize,
selectionModel,
sortModel,
} = useDataGridPro();
return (
<DataGridPro
error={error}
onError={handleError}
onPageChange={handlePageChange}
onPageSizeChange={handlePageSizechange}
onSelectionModelChange={handleSelectionModelChange}
onSortModelChange={handleSortModelChange}
page={page}
pageSize={pageSize}
selectionModal={selectionModel}
sortModel={sortModel}
/>
);
}
DatePicker
For the DatePicker
component, use the useDateTimePicker
hook.
DateRangePicker
import DateRangePicker from '@mui/material/DateRangePicker';
import { useDateRangePicker } from 'use-mui';
function MyDateRangePicker() {
const { handleChange, handleClose, handleOpen, open, value } =
useDateRangePicker();
return (
<DateRangePicker
onChange={handleChange}
onClose={handleClose}
onOpen={handleOpen}
open={open}
value={value}
/>
);
}
DateTimePicker
import DateTimePicker from '@mui/lab/DateTimePicker';
import { useDateTimePicker } from 'use-mui';
function MyDateTimePicker() {
const { handleChange, handleClose, handleOpen, open, value } =
useDateTimePicker();
return (
<DateTimePicker
onChange={handleChange}
onClose={handleClose}
onOpen={handleOpen}
open={open}
value={value}
/>
);
}
DesktopDatePicker
For the DesktopDatePicker
component, use the
useDateTimePicker
hook.
DesktopDateRangePicker
For the DesktopDateRangePicker
component, use the
useDateTimePicker
hook.
DesktopDateTimePicker
For the DesktopDateTimePicker
component, use the
useDateTimePicker
hook.
DesktopTimePicker
For the DesktopTimePicker
component, use the
useDateTimePicker
hook.
Dialog
import Dialog from '@mui/material/Dialog';
import { useDialog } from 'use-mui';
function MyDialog() {
const { handleClose, open } = useDialog();
return (
<Dialog onClose={handleClose} open={open}>
Hello world!
</Dialog>
);
}
Additionally, the useDialog
hook returns a reason
property that can be used
to determine the reason for closing the dialog.
Drawer
import Drawer from '@mui/material/Drawer';
import { useDrawer } from 'use-mui';
function MyDrawer() {
const { handleClose, open } = useDrawer();
return <Drawer onClose={handleClose} open={open} />;
}
FilledInput
For the FilledInput
component, use the useInput
hook.
FormControlLabel
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import { useFormControlLabel } from 'use-mui';
function MyFormControlLabel() {
const { checked, handleChange } = useFormControlLabel();
return (
<FormControlLabel
checked={checked}
control={<Checkbox />}
label="My checkbox"
onChange={handleChange}
/>
);
}
Input
import Input from '@mui/material/Input';
import { useInput } from 'use-mui';
function MyInput() {
const { handleChange, value } = useInput();
return <Input onChange={handleChange} value={value} />;
}
InputBase
For the InputBase
component, use the useInput
hook.
Menu
import Menu from '@mui/material/Menu';
import { useMenu } from 'use-mui';
function MyMenu() {
const { handleClose, open } = useMenu();
return <Menu onClose={handleClose} open={open} />;
}
Additionally, the useMenu
hook returns a reason
property that can be used to
determine the reason the menu was closed.
MobileDatePicker
For the MobileDatePicker
component, use the
useDateTimePicker
hook.
MobileDateRangePicker
For the MobileDateRangePicker
component, use the
useDateTimePicker
hook.
MobileDateTimePicker
For the MobileDateTimePicker
component, use the
useDateTimePicker
hook.
MobileTimePicker
For the MobileTimePicker
component, use the
useDateTimePicker
hook.
Modal
import Modal from '@mui/material/Modal';
import { useModal } from 'use-mui';
function MyModal() {
const { handleClose, open } = useModal();
return <Modal onClose={handleClose} open={open} />;
}
ModalUnstyled
For the ModalUnstyled
component, use the useModal
hook.
MonthPicker
import MonthPicker from '@mui/lab/MonthPicker';
import { useMonthPicker } from 'use-mui';
function MyMonthPicker() {
const { date, handleChange } = useMonthPicker();
return <MonthPicker date={date} onChange={handleChange} />;
}
NativeSelect
import NativeSelect from '@mui/material/NativeSelect';
import { useNativeSelect } from 'use-mui';
function MyNativeSelect() {
const { handleChange, value } = useNativeSelect();
return <NativeSelect onChange={handleChange} value={value} />;
}
OutlinedInput
For the OutlinedInput
component, use the useInput
hook.
Pagination
import Pagination from '@mui/material/Pagination';
import { usePagination } from 'use-mui';
function MyPagination() {
const { handleChange, page } = usePagination();
return <Pagination onChange={handleChange} page={page} />;
}
Popover
import Popover from '@mui/material/Popover';
import { usePopover } from 'use-mui';
function MyPopover() {
const { handleClose, open } = usePopover();
return <Popover onClose={handleClose} open={open} />;
}
Additionally, the usePopover
hook returns a reason
property that can be used
to determine the reason the popover was closed.
Radio
import Radio from '@mui/material/Radio';
import { useRadio } from 'use-mui';
function MyRadio() {
const { checked, handleChange } = useRadio();
return <Radio checked={checked} onChange={handleChange} />;
}
RadioGroup
import RadioGroup from '@mui/material/RadioGroup';
import { useRadioGroup } from 'use-mui';
function MyRadioGroup() {
const { handleChange, value } = useRadioGroup();
return <RadioGroup onChange={handleChange} value={value} />;
}
Rating
import Rating from '@mui/material/Rating';
import { useRating } from 'use-mui';
function MyRating() {
const { handleChange, value } = useRating();
return <Rating onChange={handleChange} value={value} />;
}
Select
import Select from '@mui/material/Select';
import { useSelect } from 'use-mui';
function MySelect() {
const { handleChange, handleClose, handleOpen, open, value } = useSelect();
return (
<Select
onChange={handleChange}
onClose={handleClose}
onOpen={handleOpen}
open={open}
value={value}
/>
);
}
Additionally, the useSelect
hook returns a child
property that can be used
to render the selected child.
Slider
import Slider from '@mui/material/Slider';
import { useSlider } from 'use-mui';
function MySlider() {
const { handleChange, value } = useSlider();
return <Slider onChange={handleChange} value={value} />;
}
Additionally, the useSlider
hook returns an activeThumb
property that can be
used to determine the index of the last moved thumb.
SliderUnstyled
For the SliderUnstyled
component, use the useSlider
hook.
Snackbar
import Snackbar from '@mui/material/Snackbar';
import { useSnackbar } from 'use-mui';
function MySnackbar() {
const { handleClose, open } = useSnackbar();
return <Snackbar onClose={handleClose} open={open} />;
}
Additionally, the useSnackbar
hook returns a reason
property that can be
used to determine the reason the snackbar was closed.
SpeedDial
import SpeedDial from '@mui/material/SpeedDial';
import { useSpeedDial } from 'use-mui';
function MySpeedDial() {
const { handleClose, handleOpen, open } = useSpeedDial();
return <SpeedDial onClose={handleClose} onOpen={handleOpen} open={open} />;
}
StaticDatePicker
For the StaticDatePicker
component, use the
useDateTimePicker
hook.
StaticDateRangePicker
For the StaticDateRangePicker
component, use the
useDateRangePicker
hook.
StaticDateTimePicker
For the StaticDateTimePicker
component, use the
useDateTimePicker
hook.
StaticTimePicker
For the StaticTimePicker
component, use the
useDateTimePicker
hook.
SwipeableDrawer
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
import { useSwipeableDrawer } from 'use-mui';
function MySwipeableDrawer() {
const { handleClose, handleOpen, open } = useSwipeableDrawer();
return (
<SwipeableDrawer onClose={handleClose} onOpen={handleOpen} open={open} />
);
}
Switch
import Switch from '@mui/material/Switch';
import { useSwitch } from 'use-mui';
function MySwitch() {
const { checked, handleChange } = useSwitch();
return <Switch checked={checked} onChange={handleChange} />;
}
TablePagination
import TablePagination from '@mui/material/TablePagination';
import { useTablePagination } from 'use-mui';
function MyTablePagination() {
const { handlePageChange, handleRowsPerPageChange, page, rowsPerPage } =
usePagination();
return (
<TablePagination
onPageChange={handlePageChange}
onRowsPerPageChange={handleRowsPerPageChange}
page={page}
rowsPerPage={rowsPerPage}
/>
);
}
Tabs
import Tabs from '@mui/material/Tabs';
import { useTabs } from 'use-mui';
function MyTabs() {
const { handleChange, value } = useTabs();
return <Tabs onChange={handleChange} value={value} />;
}
TextField
import TextField from '@mui/material/TextField';
import { useTextField } from 'use-mui';
function MyTextField() {
const { handleChange, value } = useTextField();
return <TextField onChange={handleChange} value={value} />;
}
TimePicker
For the TimePicker
component, use the useDateTimePicker
hook.
ToggleButtonGroup
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { useToggleButtonGroup } from 'use-mui';
function MyToggleButtonGroup() {
const { handleChange, value } = useToggleButtonGroup();
return <ToggleButtonGroup onChange={handleChange} value={value} />;
}
Tooltip
import Tooltip from '@mui/material/Tooltip';
import { useTooltip } from 'use-mui';
function MyTooltip() {
const { handleClose, handleOpen, open } = useTooltip();
return <Tooltip onClose={handleClose} onOpen={handleOpen} open={open} />;
}
TreeView
import TreeView from '@mui/lab/TreeView';
import { useTreeView } from 'use-mui';
function MyTreeView() {
const { expanded, handleNodeSelect, handleNodeToggle, selected } =
useTreeView();
return (
<TreeView
expanded={expanded}
onNodeSelect={handleNodeSelect}
onNodeToggle={handleNodeToggle}
selected={selected}
/>
);
}
Contributing
To contribute to this repository, start by running the following commands.
- To keep Yarn up to date, run
yarn set version latest
. - To keep dependencies up to date, run
yarn up "*" "@*/*"
. - If you use VIM, run
yarn sdks vim
. - If you use Visual Studio Code, run
yarn sdks vscode
.
To test your changes for validity, use the following scripts:
- To build your changes, run
yarn rollup
. - To build your changes in watch mode, run
yarn rollup-watch
. - To lint your changes, run
yarn eslint
. - To unit test your changes, run
yarn jest
. - To unit test your changes in watch mode, run
yarn jest-watch
.