• Stars
    star
    246
  • Rank 159,606 (Top 4 %)
  • Language ReScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

ReScript bindings for MUI

ReScript Bindings for MUI (WIP!)

Installation

  1. Install all necessary packages according to the official MUI-Material installation guide: https://mui.com/material-ui/getting-started/installation/.
  2. Install @rescript-mui/material
npm install @rescript-mui/material
  1. Add it to dependencies in your bsconfig.json:
{
  "bs-dependencies": ["@rescript-mui/material"]
}

This library provides ReScript bindings for MUI.

These bindings will only work with ReScript 11 (uncurried mode) and JSX version 4, as it enables us to utilize untagged variants, optional record fields, and record props spread. The latter is especially important, as we are finally able to inherit props from one component to another more easily.

What happened to the bindings for Material-UI 4?

They are still available, check out the old website: https://rescript-material-ui.cca.io/.

Why no new website?

  1. One of the goals of this rewrite is to make the usage of MUI in ReScript more accessible. In the best case you never need to leave your editor, since now we have doc comments for (almost) every property.
  2. It just takes too much time to maintain.
  3. In our opinion, it is much more useful (albeit not as pretty) to just have a look at the examples folder.

What's inside?

MUI package ReScript bindings package Namespace Progress
@mui/material @rescript-mui/material Mui 99 %
@mui/lab @rescript-mui/lab MuiLab 100 %
@mui/x-date-pickers @rescript-mui/x-date-pickers MuiXDatePickers 10 %
@mui/base Not implemented! MuiBase (?) -
@mui/joy Not implemented! Joy (?) -
@mui/system Not implemented! MuiSystem (?) -
@mui/x-data-grid Not implemented! MuiXDataGrid (?) -

NOTE: @mui/styles will never be implemented, as it is the legacy styling solution which is not compatible with React.StrictMode or React 18.

Progress

MUI-Material

Components

  • Accordion
  • AccordionActions
  • AccordionDetails
  • AccordionSummary
  • Alert
  • AlertTitle
  • AppBar
  • Autocomplete
  • Avatar
  • AvatarGroup
  • Backdrop
  • Badge
  • BottomNavigation
  • BottomNavigationAction
  • Box
  • Breadcrumbs
  • Button
  • ButtonBase
  • ButtonGroup
  • Card
  • CardActionArea
  • CardActions
  • CardContent
  • CardHeader
  • CardMedia
  • Checkbox
  • Chip
  • CircularProgress
  • Collapse
  • Container
  • CssBaseline
  • Dialog
  • DialogActions
  • DialogContent
  • DialogContentText
  • DialogTitle
  • Divider
  • Drawer
  • Fab
  • Fade
  • FilledInput
  • FormControl
  • FormControlLabel
  • FormGroup
  • FormHelperText
  • FormLabel
  • GlobalStyles
  • Grid
  • Grow
  • Hidden
  • Icon
  • IconButton
  • ImageList
  • ImageListItem
  • ImageListItemBar
  • Input
  • InputAdornment
  • InputBase
  • InputLabel
  • LinearProgress
  • Link
  • List
  • ListItem
  • ListItemAvatar
  • ListItemButton
  • ListItemIcon
  • ListItemSecondaryAction
  • ListItemText
  • ListSubheader
  • Menu
  • MenuItem
  • MenuList
  • MobileStepper
  • Modal
  • NativeSelect
  • OutlinedInput
  • Pagination
  • PaginationItem
  • Paper
  • Popover
  • Popper
  • Radio
  • RadioGroup
  • Rating
  • ScopedCssBaseline
  • Select
  • Skeleton
  • Slide
  • Slider
  • Snackbar
  • SnackbarContent
  • SpeedDial
  • SpeedDialAction
  • SpeedDialIcon
  • Stack
  • Step
  • StepButton
  • StepConnector
  • StepContent
  • StepIcon
  • StepLabel
  • Stepper
  • StyledEngineProvider
  • SvgIcon
  • Switch
  • SwipeableDrawer
  • Tab
  • Table
  • TableBody
  • TableCell
  • TableContainer
  • TableFooter
  • TableHead
  • TablePagination
  • TableRow
  • TableSortLabel
  • Tabs
  • TabScrollButton
  • TextField
  • ToggleButton
  • ToggleButtonGroup
  • Toolbar
  • Tooltip
  • Typography
  • Zoom

Theming

  • Theme
  • ThemeHelpers
  • ThemeOptions
  • ThemeProvider

MUI-LAB

  • LoadingButton
  • Masonry
  • TabContext
  • TabList
  • TabPanel
  • Timeline
  • TimelineConnector
  • TimelineContent
  • TimelineDot
  • TimelineItem
  • TimelineOppositeContent
  • TimelineSeparator
  • TreeItem
  • TreeView

MUI-X Date Pickers

  • AdapterDateFns
  • AdapterDateFnsJalali
  • AdapterDayjs
  • AdapterLuxon
  • AdapterMoment
  • AdapterMomentHijri
  • AdapterMomentJalaali
  • DateCalendar
  • DateField
  • DatePicker
  • DateTimeField
  • DateTimePicker
  • DayCalendarSkeleton
  • DesktopDatePicker
  • DesktopDateTimePicker
  • DesktopTimePicker
  • DigitalClock
  • LocalizationProvider
  • MobileDatePicker
  • MobileDateTimePicker
  • MobileTimePicker
  • MonthCalendar
  • MultiSectionDigitalClock
  • PickersActionBar
  • PickersDay
  • PickersLayout
  • PickersShortcuts
  • StaticDatePicker
  • StaticDateTimePicker
  • StaticTimePicker
  • TimeClock
  • TimeField
  • TimePicker
  • YearCalendar

Documentation

See documentation.

Changelog

See CHANGELOG.

Contributing

See CONTRIBUTING.