alexandrebdry / react-mui-snackbar

A React package helpers for mui snackbar

Hey! I'm Alexandre, full-stack freelance developper 👨‍💻

• 🔭 I am currently working on React open sources packages

• 👨‍💻 I worked for Dassault Systèmes as full-stack developper

• ⚡ Working for freelance clients in my free time. If you have some needs feel free to contact me !

• ❓ One question ? Ask me about anything !

Connect with me

My Skill Set

Frontend

Backend

DevOps

react-mui-snackbar's Issues

useSnackbarContext

It would be great to avoid using the SnackbarContext directly and instead provide another layer of abstraction with an exposed function that would do the heavy lifting of using the SnackbarContext for us. This would provide a cleaner API that way.

import { useSnackbarContext } from "react-mui-snackbar"

export const MyComponent = () => {
  // No more importing useContext from react
  // No more importing SnackbarContext directly from react-mui-snackbar
  const { openSnacbkar } = useSnackbarContext()
   
  // The rest of the component here...
}

Open the snackbar for a given duration

It would be great to be able to open the snackbar with a given duration as it is possible for the Snackbar component.

openSnackbar("Hello", "success", 5000)

Installed size

It would be great to have a badge for knowing what would be the size of the installed package.

This would look like this

Here is the source-code

![Installed size](https://badgen.net/packagephobia/install/react-mui-snackbar)

Don't include the sources when publishing the package

Source files are unecessary when publishing the package.

However, they are included in the package that gets downloaded when running npm install react-mui-snackbar.

The package should probably use the files property for the package.json file to prevent including other unecessary files.

Vulnerabilities badge

This would be great to add a badge that shows how many known security vulnerabilities are currently shipped with this library, most of the time it is used as a reinsurance that this library is up to date and do not contain such vulnerabilities in the source-code published.

This would look like this

There is no link, but one can be added by creating an account to snyk and monitor this specific libraries since Snyk can monitor JavaScript projects as well as for other programming languages.

Source code of the badge

![Vulnerabilities count](https://badgen.net/snyk/Alexandrebdry/react-mui-snackbar/)

Linter

This would be great if this library use a linter to check for code style issues such as inconsistent indentation of missing semi-colon so that the source-code is easier to read for someone that wants to know more about this library or for people wanting to contribute to this project.

A continuous integration unit test alongside these linter tests would help automate the process.

Using ESLint would be the best choice in my opinion.

TypeScript

It would be great to use TypeScript since it is very common to find packages that uses this language nowaday on NPM and provide many benefit for the developer experience.

Adding a property "types": "build/index.d.ts" (even if the project is not totally rewritten in TypeScript) would also be great in the package.json so that even when compiled to JavaScript, users still have the TypeScript definition types that can be triggered from VSCode Intellisense and help them better grasp the usage of this library.

NPM Badge

It would be great to add a badge for letting people know that there is a NPM package linked to this projects for those that are coming from GitHub and not NPM directly.

This would look like (clicking the link provides a link to the NPM package page)

And here is the Markdown code

[![NPM Version](https://badgen.net/npm/v/react-mui-snackbar)](https://www.npmjs.com/package/react-mui-snackbar)

Use an object instead of plain function arguments

It would be great to have an object that would allow to target only one subset of the possible parameters that we can specify when calling the snackbar.

If someone wants to open the snackbar with a specific message it is easily done with this code.

openSnackbar("Hello, I'm under the water")

This works because the severity and duration arguments have default values. In this case, the success severity and 6000 duration is totally acceptable.

But if one wants to open the snackbar with only a message and a specific duration, without updating the severity, it would still imply writing down explicitely the severity by hand.

openSnackbar("Hello", "success", 2000)

This can lead to errors when a user does not pay enough attention writing a bad severity for instance.

openSnackbar("Hello", "sucess", 2000)

A solution would be to use an object for the argument of the openSnackbar instead.

openSnackbar({message: "Hello", severity: "success", duration: 2000})

Insteadn, this would be more verbose of course, but at the same time more explicit, it offers some capabilities like only specifying the duration and message for instance.

openSnackbar({message: "Hello", duration: 2000})

Reducing any mistake made when writing the severity when not necessary.

And this would totally work. This also helps reduce the cognitive wall that the first version leads to, making re-read the code even faster than before and understanding it better.

One huge drawback is that if this is implemented in a next version, this next version would be a major breaking change since it would break any existing code written in the previous format.

`useCallback` for `openSnackbar`

Since the code for the definition of the openSnackbar might be the same from one rendering to another, and the SnackbarContextProvider component might live as a child of another component (most likely another provider), it can imply uncessary re-rendering that can cause the openSnackbar function to be redefined without any changes, introducing performance bottlenecks.

It can help to use the useCallback hooks for defining the function openSnackbar so that this one don't get re-defined across multiple re-rendering of the provider hosting this function.

Package minification

It would be great to ship an even smaller library bu using the @rollup/plugin-terser so that it saves some bytes when downloaded from the NPM repository.