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.
Installations
npm install mui-message
Developer Guide
Typescript
Yes
Module System
N/A
Node Version
20.12.2
NPM Version
10.8.3
Score
45.5
Supply Chain
83
Quality
76.4
Maintenance
100
Vulnerability
99.3
License
Contributors
Unable to fetch Contributors
Languages
TypeScript (100%)
Developer
liudichen
Download Statistics
Total Downloads
8,406
Last Day
11
Last Week
45
Last Month
307
Last Year
4,867
GitHub Statistics
4 Stars
36 Commits
1 Watching
1 Branches
1 Contributors
Package Meta Information
Latest Version
1.1.0
Package Id
mui-message@1.1.0
Unpacked Size
36.50 kB
Size
10.26 kB
File Count
14
NPM Version
10.8.3
Node Version
20.12.2
Publised On
26 Sept 2024
Total Downloads
Cumulative downloads
Total Downloads
8,406
Last day
37.5%
11
Compared to previous day
Last week
-28.6%
45
Compared to previous week
Last month
-38.8%
307
Compared to previous month
Last year
70.7%
4,867
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
mui-message
English | 简体中文
使用MUI(@mui/material)时像antd一样方便地在应用里发送message(Snackbar消息),而无需频繁使用hooks或创建Snackbar组件。
本来是直接在本地应用使用,基本没问题,所以打下包发布下,后面方便直接引用。TypeScript不会用,参考着其他包添加了下类型。可能会存在一些问题。
安装
mui-message
依赖于@mui/material(^5.0.0)及notistack(^2.0.3),只是简单做了一点封装,改了一点默认props,相关props及message
方法的第二个参数option
可参考这2个库.或者直接查看notistack的文档.
基于hooks,所以需要react
>=16.8.0.
采用如下命令安装:
1npm i mui-message
使用
安装完毕后即可在项目里使用了,里面主要有4个导出的元素:messageRef
、message
、MessageBox
、useMessage
其中MessageBox
是封装好的SnackbarProvider
及 MessageProvider
组件,
该组件需要放置到项目的较高层级(建议放在路由外边)。虽然其支持children,但实际可以不需要将其他组件作为它的子组件。如果其他组件作为子组件,则可在子组件中使用useMessage
hook,可以获取到message
实例,该实例与从mui-message
直接导出的 message
是一致的。
message
及其子方法(info
、success
、error
、warning
)是发送消息的方法。
message.destroy
方法可以用来销毁所有消息条。
也可以在此基础上进行一定的自定义。如果需要使用消息实例,如自定义action时,可以利用messageRef
来获取。
注意: 同一应用只需要使用一次MessageBox组件即可。
使用时将MessageBox作为1个独立组件挂在较高层级即可,建议放在路由外层,这样就全局可以访问了.
如果你自定义了全局MUI主题,应该把该组件放在根ThemeProvider
组件内部。
直接使用
在应用入口:
1// App.js 2import React from 'react' 3import { MessageBox } from 'mui-message'; 4 5const App = () => { 6 return ( 7 <> 8 <MessageBox /> 9 <Router> 10 // 其他内容 11 </Router> 12 <> 13 ); 14}
在需要发送消息的地方,可以这样使用:
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 message: 14 message.destroy(); 15} 16
使用useMessage Hook
在应用入口:
1// App.js 2import React from 'react' 3import { MessageBox } from 'mui-message'; 4 5const App = () => { 6 return ( 7 <> 8 <MessageBox > 9 <Router> 10 // 其他内容 11 </Router> 12 </MessageBox> 13 <> 14 ); 15}
在需要发送消息的地方(应处于MessagBox
内部),可以这样使用:
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} 13
方法参数
message
及message.info
(及error
/warning
/success
子方法)方法实际调用的是notistack
里的enqueueSnackbar
,message.destroy
调用的是closeSnackbar
,所以其参数完全相同.
message
、message.info
、message.error
、message.success
、message.warning
为生成一条snackbar消息的方法,如果当前总数量超出maxSnack数量,会进入队列。
接受2个参数:第1个参数为消息内容。第2个参数为可选的,可以用来指定variant
、anchorOrigin
(消息位置)、autoHideDuration
(自动关闭等待时间)等参数。以上几个方法实际都只是指定了相应的variant
,
其中message
对应 variant='default',其他方法为variant=其方法名:
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
方法无参数,可销毁所有snackbar消息:
1 // interface: 2 () => void; 3 4 // use: 5 message.destroy();
MessageBox
的props 及 message
的option 可配置项见下面.
Props及option
MessageBox的props 及 message及其子方法的option参数与notistack相同,可以参考notistack的文档。
MessageBox默认props
MessageBox
的默认props如下,你可以通过props传递进行覆盖。
1MessageBox.defaultProps = { 2 maxSnack:3, 3 autoHideDuration: 2000, 4 dense: isMobile, // 来自react-device-detect,用来判断是否为移动设备 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};
props及option可配置项
MessageBox及 message的option参数支持的props或配置项(除了responsive和breapoint,这2个是自定义的,只能用于props)均与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};
自定义
消息的默认配置可以直接通过给MessageBox
组件传递相关props来直接配置:
通过MessagBox进行全局配置
通过MessageBox的props可以进行全局配置,如:
1 <MessageBox 2 maxSnack={4} // customize max count of messages that can show at the same time 3 { ...otherProps } 4 />
如果需要使用SnackbarContext实例(比如自定义action时),可通过messageRef
获取。
option临时配置
也可在使用message、message.info等方法的option临时配置一条消息.
1 message.error('something is error',{ autoHideDuration:5000, });
使用Ref
在需自定义action
prop 等需要使用snackbar实例时可以通过导出的messageRef
获取,可以获取到closeSnackbar
、enqueueSnackbar
等来自notistack
的一些方法和属性:
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.
Other packages similar to mui-message
mui-message-box
mui-message-box is a message box component using mui 5.^, developed and maintained by Pradeep(kpradeeprao@gmail.com).
@dhouse.in/message-notification-mui
Message notification component using Material-UI
mui-alert
The config `MUI-Snackbar` as Provider for convenience to show message alert in MaterialUI (error, info, success, warning)
@zsjs/mui-components
--- title: zs-message subGroup: general ---