mui-message

使用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