The snackbar component
So for your app, you need a good old snackbar component. How difficult can it be? This was my initial thought as well. Let's find out 🙄
A note of caution: I was trying to find a quick solution for this, as another team was already developing the snackbar component.
At the initial thought a snackbar is a simple component which shows a perhaps white text text on black background on a strap. What we don't see is
- Auto-hide after
- Animate and bring up
- Animate and hide down
- Animation speed (going should be faster - as it would then seem as if the UI is snappy)
- Trigger the snackbar from redux store maybe?
... and many more
I decided to support
- Auto-hide after 3 seconds
- Changeable text (duh)
- Triggerable from redux store
I felt this was the challenging part, as redux is going to trigger an UI change. I did not want to create a state in the store to do this.
My approach was using context api
Here is my snackbar component
We can use the context API like
Now, I feel this is a bit too verbose and at the call site things should be a bit simplified.
So, lets use a HOC component for this.
Now, at the root component you can wrap the default export with this wrapper.
Now at the call site where you are using redux, you can grab the
showSnackBar function like this
Now pass the
this.showSnackBar to redux method, while calling.
OK OK, I get it, this seems a long process as well. I just realized this while writing and explaining.
But, on the other-hand this is indeed simpler than managing in redux state.