Hello, I've been working on a snackbar feature that appears and disappears on a set timer but also needs to pause when hovered over. Unfortunately, the current setup with setTimeout and useState is causing issues with this functionality.
I have looked online for solutions to this problem but haven't found any that work for me yet. Any assistance or guidance would be greatly appreciated.
App.js
const App = () => {
const [showSnack, setShowSnack] = useState(false);
const toggle = () => {
setShowSnack(true);
setTimeout(() => {
setShowSnack(false);
}, 1000);
}
return (
<div>
<button onClick={toggle}>Toggle</button>
<Snack show={showSnack} />
</div>
);
}
render(<App />, document.getElementById('root'));
Snack.js
const Snack = ({show}) => {
return(
<div className={`my-snack ${show ? 'show' : ''}`}>My Snackbar</div>
);
}
index.css
.my-snack {
position: fixed;
width: 100%;
height: 500px;
background: lightgray;
bottom: 0;
visibility: hidden;
cursor: pointer;
}
.my-snack.show {
visibility: visible;
animation: fadein 0.5s, fadeout 0.5s 9.6s;
}
.my-snack:hover {
animation-play-state: paused;
}
@keyframes fadein {
from {bottom: -500px;}
to {bottom: 0;}
}
@keyframes fadeout {
from {bottom: 0;}
to {bottom: -500px; opacity: 0;}
}