themojilla / material-snackbar-supplier

A provider pattern component for using Material UI Snackbar anywhere form your react components

Passionate about JavaScript and frontend engineering, currently engineering excellence at Cafe Bazaar. Formerly led frontend development initiatives at Digikala. Excited to empower dreams through technology at Bit Harmony.

material-snackbar-supplier's Issues

Huge bundle size of everyone who use this library

By destructuring import of the Close icon of Material-UI in the supplier.js file, I faced a huge bundle of my project. something about 5mg 😮

For a test, I omit all of my libraries and based on Tree Shaking docs of Webpack I implement the tools and tricks in my project but bundle has no change until I fount the issue and 1 percent I don't think it is material-snackbar-supplier causes to this damn bundle.

Based on this material-ui doc the importing of the Close icon should change to:

import CloseIcon from '@material-ui/icons/Close';

So as fast as I can I send a PR, and please assign the bug tag to this issue and review and merge my PR and please as fast as you can release a new version.

Thanks a lot bro.

Animation to show snack bar

The default animation for showing snack bar is fade-in/fade-out, it's enough now but having different animations to show snack bar messages make this awesome library better than before.

Possibility of Bug on passing settings

In these lines, there is a possibility of existing of a bug:

~~~
const {
  classes,
  settings,
  children,
  anchorOriginVertical,
  anchorOriginHorizontal,
} = this.props;

return (
  <Provider value={this.getChildrenContext()}>
    {children}
    <NoSsr>
      <Snackbar
        anchorOrigin={{
          vertical: anchorOriginVertical,
          horizontal: anchorOriginHorizontal,
        }}
        open={open}
        onClose={this.handleClose}
        {...settings}
      >
~~~

The spreading of setting can overwrite the open or onClose props. we should have codes like below to avoid this possibility of the bug:

~~~
const {
  classes,
  settings: {
    open: _open,
    onClose: _onClose,
    ...restOfSettings
  },
  children,
  anchorOriginVertical,
  anchorOriginHorizontal,
} = this.props;

return (
  <Provider value={this.getChildrenContext()}>
    {children}
    <NoSsr>
      <Snackbar
        anchorOrigin={{
          vertical: anchorOriginVertical,
          horizontal: anchorOriginHorizontal,
        }}
        open={open}
        onClose={this.handleClose}
        {...restOfSettings}
      >
~~~

Dynamic variants

As I see the supplier.js file, there are 4 variants. If this 4 variant be the default and a developer could declare her/his own variant with her/his own theme, Then we have a flexible library for showing snack bar that the notistack doesn't have.

Can you please provide a working example piece of code ?

Better naming

After using withSnackBar higher order component we access to a function that name is message. This message can dispatch the trigger action of the snack bar.

But I think its name is not based on Clean Code standards. its name should be showSnackBar or enqueueSnackBar. Its name should show us what it will do.

Weirdly, the first parameter of message function of the snack bar is message too. it is complicated to understand. maybe it is hard to contribute.

Update this awesome package

Because of the Material UI new version, this package needs to have some updates.

What about multi snacks?!!

In an especial situation, I need to call showSnackBar three times but it shows itself once and shows the third message. It should fix.

Standard writing of React Component

In the supplier.js file there are two exports and it is not based on React Component writing guidelines. the withSnackBar and SnackBarSupplier should be in separated files and the creation of context should be happening in a separate file to pass to withSnackBar.js and SnackBarSupplier files.

It's my idea to adhere to the guidelines of Facebook to react components. maybe there is a better way.

There is no need to pass default props to Material SnackBar

Actually, in this library, we use Material-UI SnackBar and this component has some default props. So it is not necessary we pass default props to this component.

In line 77 of supplier.js there is anchorOrigin. I think it is not needed. Instead of this, we can use Material UI Slide and put a prop for developers that choose the motion of snack bar appearing or etc.

Module parse failed

I get the following error when I imported the module:
ERROR in ./node_modules/material-snackbar-supplier/src/supplier.js 52:8
Module parse failed: Unexpected token (52:8)
You may need an appropriate loader to handle this file type.

50 render() {
51 return (
52 <SnackBarContext.Consumer>
53 {({message}) => {
54 return <Component {...this.props} message={message}/>

I also suggest moving the index.js file to the root of the module

Adding ESLint and prettier

Undoubtedly, the benefits of having ESLint and prettier are not overlooked. so having it is a feature for contributors.

Injecting Theme for different variants

In an especial situation, I need to use my theme, a light red for showing an error message and etc. Also, the Close button has its color and I couldn't inject my CSS.

I have no idea how to fix it but this current definition is not very well.

error: this.props.message is not a function