evandromacedo / react-simple-snackbar Goto Github PK
View Code? Open in Web Editor NEWA really simple React snackbar component ⚛︎
Home Page: https://evandromacedo.github.io/react-simple-snackbar
License: MIT License
A really simple React snackbar component ⚛︎
Home Page: https://evandromacedo.github.io/react-simple-snackbar
License: MIT License
Hello 😊
I currently used this library and found it's impossible to customize width of snackbar.
Because of 96L of src/Snackbar.js, I thought customStyle overrides styles defined snackbar class(src/Snackbar.css).
But it isn't working.
My codes below.
const options = { style: { minWidth: '192px', width: '192px', maxWidth: '192px' } }
const [openSnackbar] = useSnackbar(options);
How can I do?
I'm appreciate if anyone will reply. 🙇🏻♀️
If there's no way, I want to contribute for this issue :D
Hi, I'd like to keep the snackbar open indefinitely, but I tried to set the duration to 0
, Infinity
and Number.MAX_SAFE_INTEGER
but neither of these work (it instantly closes).
What am I missing?
Currently sensible CSPs will block the inline CSS the component uses.
The only way I have found is to set unsafe-inline
which is not a good practice.
Could the CSS be manually imported also to prevent it being inline during runtime?
Need help with how to pass default configuration via props
I want to request this feature that when uploading a file and at the same time showing the snackbar and the upload progress will display on the snackbar?
I was thinking I can create a PL for this myself if this is possible to do with this lib? I have not looked at the code base just asking?
Nice work on such a simple component!
With all the latest of React and this library there is a warning when a snackbar gets toggle on.
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of n which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
Quick sandbox to show the error.
https://codesandbox.io/s/react-simple-snackbar-broken-9m9lm?file=/src/App.js
I can not use it in my typescipt project.
node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"16.x" from [email protected]
npm ERR! node_modules/react-simple-snackbar
npm ERR! react-simple-snackbar@"^1.1.11" from the root project
hi am getting above with react 17
The yarn install command says "yard" instead of "yarn" 😉
Im facing issues when i want to use the useSnakackbar(), also i have the same issue with 1.1.9
App Sample:
Codebox sample
Greetings,
I'm curious to see if there is a way to have multiple snackbars to use the component also for some specific notifications that can be stacked, kinda like facebook.
by default the parent item is having z-index:1, which makes it invisible if there's other content on page with z-index 2,3,5 , 10 or so on. it would be better to provide a option to change the z-index, we can't we it with css also. Yea the below hack works but there should option to configure that else you can keep the default z-index to 9999 as we always want it on top.
[class*="Snackbar_snackbar-wrapper"] {
z-index: 9999 !important;
}
It would be cool if a function could be passed as an argument to the hook to be executed when the snackbar closes.
@evandromacedo thank you for building and providing this incredible tool for everyone to enjoy.
It looks like managing it is no longer a priority of yours, but it is still the # 1 result that shows up when I google 'react snackbar'.
Given this, I would appreciate if we could at least get the dependencies to be upgraded to their latest versions so I can use it, and help manage it. I specifically need react@"^18.2.0"
I would hate to see this tool loose its position as the top snackbar package for react, but it seems inevitable without a little bit of help.
Snackbar is shown behind the Drawer and is visible on dismissing it, is there any way to set the z-z-index priority, I tried using, but it didn't help.
const options = { zIndex: '10000 !important', } .... const [openSnackbar, closeSnackbar] = useSnackbar(options)
Any suggestions would be great!
[Feature Request] It'd be cool if we could show a custom component inside the snackbar.
Are you still maintaining this project. Any plans for implementing this feature
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.