quisido/use-mui quisido/use-mui

  • Stars
    star
    140
  • Rank 261,473 (Top 6 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created about 3 years ago
  • Updated over 2 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
quisido/use-mui
github

quisido

Reviews

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

Repository Details

React hooks for Material UI

React hooks for Material UI

version minzipped size downloads GitHub Action: Push

Install

  • npm install use-mui or
  • yarn 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 } =
    useTablePagination();
  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.

More Repositories

1

reactn

React, but with built-in global state management.
TypeScript
1,908
star
2

use-react-router

React Hook for pub-sub behavior using React Router.
TypeScript
567
star
3

fetch-suspense

A React hook compatible with React 16.6's Suspense component.
TypeScript
492
star
4

optimal-react-file-structure

Optimal file structure for React applications.
JavaScript
250
star
5

use-force-update

React Hook to force your function component to update
JavaScript
182
star
6

use-clippy

React Hook for reading from and writing to the user's clipboard.
TypeScript
179
star
7

quicksort-js

An implementation of Quicksort in JavaScript/TypeScript.
TypeScript
61
star
8

lazy-i18n

Lazy load translations for your React application.
TypeScript
60
star
9

react-innertext

Returns the innerText of a React JSX object.
TypeScript
50
star
10

use-dimensions

A React hook for the React Native Dimensions API.
JavaScript
32
star
11

fetch-action-creator

Fetches using standardized, four-part asynchronous actions for redux-thunk.
JavaScript
28
star
12

quisi.do

https://quisi.do/
TypeScript
27
star
13

im-fine

A visual representation of depressive thoughts.
HTML
20
star
14

react-multi-context

Manage multiple React 16 contexts with a single component.
JavaScript
20
star
15

react-capsule

A React capsule is a global state instance that can be used across multiple React components.
TypeScript
16
star
16

use-async-function

A React hook for integrating asynchronous function state into React function component state.
TypeScript
15
star
17

use-awsui

React hooks for the AWS UI component library
TypeScript
14
star
18

react-datadog

A React wrapper for DataDog RUM
TypeScript
14
star
19

react-native-web-view

An implementation of React Native's WebView that allows for postMessage on iOS devices.
JavaScript
13
star
20

react-sparkline-svg

A React Component that renders a sparkline as an SVG.
TypeScript
12
star
21

reactn-devtools

ReactN DevTools allow you to view your ReactN state with the Redux DevTools browser extension
TypeScript
11
star
22

reactn-vs-redux

The same application, implemented and measured in both ReactN and redux.
JavaScript
11
star
23

node-package-template

A GitHub repository template for Node modules.
JavaScript
10
star
24

use-update-effect

useUpdateEffect is a React hook implementation of componentDidUpdate
TypeScript
10
star
25

rpg-overworld-engine

A tech demo for a browser-based, Pokemon-esque RPG overworld engine that even supports Internet Explorer 6.
JavaScript
10
star
26

sparkline-svg

Generate a Sparkline as an SVG.
TypeScript
10
star
27

peoplecott

Peoplecott attempts to unveil the immoral behavior funded by brand loyalty.
TypeScript
9
star
28

deep-proxy-polyfill

Recursively proxies an object.
TypeScript
9
star
29

react-segment-analytics

Segment integration with React
TypeScript
9
star
30

awsui-theme

Apply a custom theme to the AWS UI
TypeScript
7
star
31

textualsext

Textual Sext is a choose-your-own pornographic adventure game, designed by and featuring reddit user /u/textualsext. Click the images to scroll through the gallery, then choose an option for how to continue the storyline.
JavaScript
7
star
32

react-router-v6-sentry-browser-tracing-integration

Sentry browser tracing integration for React Router v6
TypeScript
6
star
33

use-awsui-router

Collection of React hooks for AWS UI with support for React Router.
TypeScript
6
star
34

react-pluralsight-score

A React component mimicking the Pluralsight Score IQ graph.
JavaScript
6
star
35

konami-js

Konami.js is an ES6 JavaScript instance that allows web developers to implement the Konami code on their web pages. By pressing up, up, down, down, left, right, left, right, B, A, Enter, one or more custom JavaScript functions will execute.
JavaScript
6
star
36

react-rainbow-text

Generates rainbow-colored text in React.
JavaScript
5
star
37

dota2huds

View a live demo of any Dota 2 HUD.
JavaScript
5
star
38

use-mouse-move

React hook for listening to mouse move events
TypeScript
4
star
39

medium-stats-api

An API endpoint for fetching Medium article stats.
JavaScript
4
star
40

mssql-query-builder

Dynamically build Microsoft SQL Server queries using JavaScript.
TypeScript
4
star
41

react-portfolio

A sleek portfolio design created in React.
TypeScript
4
star
42

rainbow-text

Rainbowify your text.
JavaScript
3
star
43

use-offline

React hook for listening to online/offline events.
TypeScript
3
star
44

with-router

A pub-sub alternative HOC to react-router's withRouter HOC.
JavaScript
3
star
45

super-mario-world-js

Super Mario World JS was a project for a college-level Programming Paradigms course.
JavaScript
3
star
46

spritesheet2gif-php

Converts sprite sheets to GIFs.
PHP
2
star
47

react-mui-tooltip

Create React tooltips similar to those used by Material-UI.
JavaScript
2
star
48

absolute-timestamp

Renders an absolute timestamp in React
TypeScript
2
star
49

use-awsui-table-item-description

Adds a description row to each table item.
TypeScript
2
star
50

hsl2rgb-js

Convert HSL to RGB.
JavaScript
2
star
51

breakout-of-smoking

The classic Breakout game themed as an anti-smoking campaign.
TypeScript
2
star
52

animal-crossing-music

Synchronize your day's background music with Animal Crossing.
TypeScript
2
star
53

use-ctrl-key

React hook for listening to when the Ctrl key is pressed
TypeScript
2
star
54

fullstory-react

FullStory integration with React
TypeScript
2
star
55

sonic-the-hedgehog-tribute

An artistic tribute to the Sonic the Hedgehog franchise.
JavaScript
2
star
56

meditative-breathing

A visual representation to guide meditative breathing.
CSS
2
star
57

awsui-dark-mode

Applies a dark mode theme to AWS UI components.
TypeScript
2
star
58

aws-console

automated AWS console
TypeScript
2
star
59

react-object-prop

Caches Object props in React so as to prevent unnecessary re-rendering.
JavaScript
2
star
60

configure-webpack

Easily generates a typical Webpack configuration.
JavaScript
1
star
61

docker-hub-webhook

A Docker container designed to listen for and redeploy images from Docker Hub webhooks.
JavaScript
1
star
62

sentry-react

A React wrapper to mount Sentry
TypeScript
1
star
63

use-page-transition

React hook for listening to page visibility events
TypeScript
1
star
64

glossary

Monorepo for Glossary application generation
TypeScript
1
star
65

use-key-down

React hook for listening to the keydown event.
TypeScript
1
star
66

password-generator

Generates a random string for password use.
HTML
1
star
67

shopping-list

A simple shopping list application.
JavaScript
1
star
68

delimiter

Places delimiters between items in an array.
JavaScript
1
star
69

reverse-proxy-nginx

The nginx layer of a containerized reverse proxy.
Dockerfile
1
star
70

quisido.com

A portfolio for Ace Quisido.
TypeScript
1
star
71

tf2-bingo

Mark your TF2 Bingo card as stereotypical situations unfold throughout your game!
HTML
1
star
72

use-params-memo

React's `useMemo` hook with a parameterized function
JavaScript
1
star
73

reverse-proxy-certbot

The certbot layer of a reverse proxy.
Dockerfile
1
star
74

rainbow-gradient

Generates a gradient of the colors of the rainbow.
JavaScript
1
star
75

platformer-engine

A 2D platformer engine implemented in the web browser.
JavaScript
1
star
76

react-quotes-carousel

A quotes carousel for React.
JavaScript
1
star
77

use-update-layout-effect

a useLayoutEffect hook that only triggers on update (not on mount)
TypeScript
1
star
78

spritesheet2gif-api

a back end API for converting sprite sheets to GIFs
PHP
1
star
79

trolley-solution-client

The Trolley Solution is a video board game based on the philosophical trolley problem.
TypeScript
1
star
80

react-native-meditative-breathing

A visual representation to guide meditative breathing.
JavaScript
1
star
81

table-sort

Open source JavaScript snippet that scans tabular data, appends arrow links to the header of sortable tables, and binary sorts the table by the data contained in that column when its sort link is clicked.
JavaScript
1
star
82

jquery-image-magnifier

an IE6-compliant image magnification tool
JavaScript
1
star
83

jquery-news-slider

A graphical news slider built in jQuery.
1
star
84

react-hooks

simple React hooks
1
star
85

docker-php-gd

A PHP/Apache Docker image configured to support the GD image library.
Dockerfile
1
star