Gathering detailed insights and metrics for mui-message
Gathering detailed insights and metrics for mui-message
Gathering detailed insights and metrics for mui-message
Gathering detailed insights and metrics for mui-message
mui-message-box
mui-message-box is a message box component using mui 5.^, developed and maintained by Pradeep(kpradeeprao@gmail.com).
@mui/private-theming
Private - The React theme context to be shared between `@mui/styles` and `@mui/material`.
@mui/utils
Utility functions for React components.
@mui/core-downloads-tracker
Internal package to track number of downloads of our design system libraries
Send messages (snackBar messages) as convenient as using antd when use MUI(@mui/material) in the application without using hooks or creating snackBar components frequently.
npm install mui-message
Typescript
Module System
Node Version
NPM Version
46.2
Supply Chain
85.7
Quality
76.4
Maintenance
100
Vulnerability
99.3
License
Updated on 26 Sept 2024
Minified
Minified + Gzipped
TypeScript (100%)
Cumulative downloads
Total Downloads
Last day
75%
Compared to previous day
Last week
-7.8%
Compared to previous week
Last month
32.9%
Compared to previous month
Last year
85%
Compared to previous year
English | 简体中文
Send messages (Snackbar messages) as convenient as using antd(ant-design) when use MUI(@mui/material), without using hooks or creating SnackBar components frequently.
mui-message
depends on @mui/material (^ 5.0.0) and notistack (^ 2.0.3), just a little encapsulation and a little change in the default props. Refer to these two libraries for related props of MessageBox
or the second parameter option
of message method and its sub methods.Or directly view documentation of notistack.
Based on hooks,so need react
>=16.8.0.
install:
1npm i mui-message
There are mainly four exported elements: messageRef
,message
, MessageBox
and a hook useMessage
MessageBox
is the component encapsulated snackbarprovider
and MessageBoxProvider
.This component should be placed at a higher level of the application (It is recommended to put it outside the router). Although it supports children, there is no need to take other components as its sub components in fact. However, if it has sub components, you can use useMessage
hook in the sub components to get a message instance which is as same as message
that exported directly from mui-message
.
message
and its sub methods(info
、success
、error
、warning
) are the methods of sending messages.
You can also customize on this basis. If you need to use the message instance, for example,you want to custom actions, you can use messageRef
to get it.
Note: You only needs to use the MessageBox component once at one application.
Just hang the MessageBox as an independent component at a higher level. It is recommended to put it on the outer layer of the router so that it can be accessed globally.
If you have customized the Mui theme globally, you should put the component inside root ThemeProvider
component.
At the application entry:
1// App.js 2import React from 'react' 3import { MessageBox } from 'mui-message'; 4 5const App = () => { 6 return ( 7 <> 8 <MessageBox /> 9 <Router> 10 // app content 11 </Router> 12 <> 13 ); 14}
It can be used to send messages like this:
1// anywhere.js 2import { message } from 'mui-message' 3 4const AnyFuncOrComponent = () => { 5 6 // send message like: 7 message('some default snackbar message'); 8 message.info('some info snackbar message'); 9 message.error('some error snackbar message'); 10 message.success('some success snackbar message'); 11 message.warning('some warning snackbar message'); 12 13 // or destroy all messages: 14 message.destroy(); 15} 16
At the application entry:
1// App.js 2import React from 'react' 3import { MessageBox } from 'mui-message'; 4 5const App = () => { 6 return ( 7 <> 8 <MessageBox > 9 <Router> 10 // app content 11 </Router> 12 </MessageBox> 13 <> 14 ); 15}
In its sub components:
1// anyComponet inside MessageBox.js 2import { useMessage } from 'mui-message' 3 4const AnySubComponent = () => { 5 const message = useMessage(); 6 // send message like: 7 message('some default snackbar message'); 8 message.info('some info snackbar message'); 9 10 // or destroy all message: 11 message.destroy(); 12}
message
and message.info
(and .error
/warning
/success
sub methods) method actually calls enqueueSnackbar
in notistack
,and message.destroy
calls closeSnackbar
, so its parameters are exactly the same as notistack
.
message
,message.info
,message.error
,message.success
and message.warning
are methods to generate a snackbar message.
They accept two parameters: the first parameter is the message content while the second parameter is optional and can be used to specify parameters such as variant
,anchorOrigin
(message location),autoHideDuration
(automatic shutdown waiting time) and so on. In fact, above methods only specify the corresponding variant
. That is, message
corresponds to variant
= 'default'
, and variant
of other methods = its method name:
1 // interface: 2 (message: string | ReactNode, option?: OptionsObject) => SnackbarKey; 3 4 // use: 5 message('this is a variant=default message'); 6 message.info('this is a variant=info message and before autohide its duration is 5 seconds',{autoHideDuration:5000});
message.destroy
method has no parameters, and it can destroy all snackbar messages:
1 // interface: 2 () => void; 3 4 // use: 5 message.destroy();
The configurable items of props of MessageBox and option of message methods are shown below:
Props of MessageBox
, option parameter of message and its sub methods are as same as those of notistack. You can refer to documentation of notistack
The default props of MessageBox
are as follows. You can overwrite them by passing custom props to the MessageBox
component.
1MessageBox.defaultProps = { 2 maxSnack:3, 3 autoHideDuration: 2000, 4 dense: isMobile, // this is import from react-device-detect , to detect whether current device is a mobile device 5 anchorOrigin:{ 6 vertical: 'top', 7 horizontal: 'center', 8 }, 9 action: (key) => { 10 return ( 11 <IconButton key='close' aria-label='Close' color='inherit' onClick={() => { 12 messageRef.current?.closeSnackbar(key); 13 }}> 14 <CloseIcon style={{ fontSize: '20px' }} /> 15 </IconButton> 16 ); 17 }, 18};
The props of MessageBox or configuration items of message (and its sub methods) supported by the option parameters(exclude responsive and breakpoint, which are customized and can only be used from props of MessageBox) are the same as notistack.
1MessageBox.propTypes = { 2 /** responsive for dense?根据宽度响应式设置dense属性?与breakpoint配合使用 3 * @default true 4 */ 5 responsive: PropTypes.boolean, 6 /** breakpoint of responsive for dense? 7 * @default 'md' 8 */ 9 breakpoint: Proptypes.oneOfType([ 10 PropTypes.oneOf(['xs' , 'sm' , 'md' , 'lg' , 'xl']), 11 PropTypes.number, 12 ]), 13 /** 14 * Denser margins for snackbars. Recommended to be used on mobile devices. 15 */ 16 dense: PropTypes.bool, 17 /** 18 * Maximum snackbars that can be stacked on top of one another. 19 * @default 3 20 */ 21 maxSnack: PropTypes.number, 22 /** 23 * Hides iconVariant if set to `true`. 24 * @default false 25 */ 26 hideIconVariant: PropTypes.bool, 27 /** 28 * Valid and exist HTML Node element, used to target `ReactDOM.createPortal` 29 */ 30 domRoot: PropTypes.elementType, 31 /** 32 * Override or extend the styles applied to the container component or Snackbars. 33 */ 34 classes: PropTypes.object, 35 /** 36 * The action to display. It renders after the message, at the end of the snackbar. 37 */ 38 action: PropTypes.oneOfType([PropTypes.node,PropTypes.func]), 39 /** 40 * The anchor of the `Snackbar`. 41 * On smaller screens, the component grows to occupy all the available width, 42 * the horizontal alignment is ignored. 43 * @default { vertical: 'top', horizontal: 'center' } 44 */ 45 anchorOrigin: PropTypes.shape({ 46 horizontal: PropTypes.oneOf(['center', 'left', 'right']).isRequired, 47 vertical: PropTypes.oneOf(['bottom', 'top']).isRequired, 48 }), 49 /** 50 * The number of milliseconds to wait before automatically calling the 51 * `onClose` function. `onClose` should then set the state of the `open` 52 * prop to hide the Snackbar. This behavior is disabled by default with 53 * the `null` value. 54 * @default 2000 55 */ 56 autoHideDuration: PropTypes.number, 57 /** 58 * Props applied to the `ClickAwayListener` element. 59 */ 60 ClickAwayListenerProps: PropTypes.object, 61 /** 62 * If `true`, the `autoHideDuration` timer will expire even if the window is not focused. 63 * @default false 64 */ 65 disableWindowBlurListener: PropTypes.bool, 66 /** 67 * The number of milliseconds to wait before dismissing after user interaction. 68 * If `autoHideDuration` property isn't specified, it does nothing. 69 * If `autoHideDuration` property is specified but `resumeHideDuration` isn't, 70 * we use the default value. 71 * @default autoHideDuration / 2 ms. 72 */ 73 resumeHideDuration:PropTypes.number, 74 /** 75 * The component used for the transition. (e.g. Slide, Grow, Zoom, etc.) 76 * @default Slide 77 */ 78 TransitionComponent: PropTypes.elementType, 79 /** 80 * The duration for the transition, in milliseconds. 81 * You may specify a single timeout for all transitions, or individually with an object. 82 * @default { 83 * enter: 225, 84 * exit: 195, 85 * } 86 */ 87 transitionDuration: PropTypes.oneOfType([ 88 PropTypes.number, 89 PropTypes.shape({ 90 appear: PropTypes.number, 91 enter: PropTypes.number, 92 exit: PropTypes.number, 93 }), 94 ]), 95 /** 96 * Props applied to the transition element. 97 * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component. 98 * @default {} 99 */ 100 TransitionProps: PropTypes.object, 101 /** 102 * Callback fired before snackbar requests to get closed. The `reason` parameter can optionally be used to control the response to `onClose`. 103 */ 104 onClose: PropTypes.func, 105 /** 106 * Callback fired before the transition is entering. 107 */ 108 onEnter: PropTypes.func, 109 /** 110 * Callback fired when the transition has entered. 111 */ 112 onEntered: PropTypes.func, 113 /** 114 * Callback fired when the transition is entering 115 */ 116 onEntering: PropTypes.func, 117 /** 118 * Callback fired before the transition is exiting 119 */ 120 onExit: PropTypes.func, 121 /** 122 * Callback fired when the transition has exited 123 */ 124 onExited: PropTypes.func, 125 /** 126 * Callback fired when the transition is exiting. 127 */ 128 onExiting: PropTypes.func, 129 /** 130 * Ignores displaying multiple snackbars with the same `message` 131 * @default false 132 */ 133 preventDuplicate: PropTypes.bool, 134 /** 135 * Used to easily display different variant of snackbars. When passed to `SnackbarProvider` all snackbars inherit the `variant`, unless you override it in `enqueueSnackbar` options. 136 * @default default 137 */ 138 variant: PropTypes.oneOf(['default','error','warning','success','info']), 139};
The default configuration of messages can be directly and globally configured by passing related props to the MessageBox
component:
Just like this:
1 <MessageBox 2 maxSnack={4} // customize max count of messages that can show at the same time 3 // { ...otherProps } 4 />
If you need to use the SnackbarContext instance (for example, when customizing an action), you can get it through messageRef
Use message, message.info and other methods temporarily configure a message:
1 message.error('something is error',{ autoHideDuration:5000, });
When want to customize action
prop and use the SnackbarContext instance, you can get it through the exported messageRef
.By it you can get methods and attributes from 'notistack', such as closeSnackbar
、enqueueSnackbar
:
1 import ( messageRef, MessagBox ) from 'mui-message' 2 const action = (key) => { 3 return ( 4 <IconButton key='close' aria-label='Close' color='inherit' onClick={() => { 5 messageRef.current?.closeSnackbar(key); 6 }}> 7 <CloseIcon style={{ fontSize: '20px' }} /> 8 </IconButton> 9 ); 10 }; 11 12 const App = () => { 13 return ( 14 <> 15 <MessageBox 16 action={action} 17 /> 18 <RouterOrSomething> 19 // app content 20 </RouterOrSomething> 21 </> 22 ); 23 }; 24
No vulnerabilities found.
No security vulnerabilities found.