Witam, robię teraz progress bar na stronie, działa on przy pomocy SVG.
const Progress_bar = () => {
const stroke = 4;
const radius = 100;
const normalizedRadius = radius - stroke * 2;
const circumference = normalizedRadius * 2 * Math.PI;
const progress = 75;
const [strokeDashoffset, setStrokeDashoffset] = useState(circumference);
useEffect(() => {
document.addEventListener('aos:in', () => {
setStrokeDashoffset(circumference - 75 / 100 * circumference);
});
document.addEventListener('aos:out', () => {
setStrokeDashoffset(circumference);
});
}, []);
return (
<div data-aos="fade-up">
<svg
class="progress-ring"
height={radius * 2}
width={radius * 2}
>
<circle
class="circle"
stroke="red"
stroke-width={stroke}
strokeDasharray={`${circumference} ${circumference}`}
style={{ strokeDashoffset }}
stroke-width={stroke}
fill="transparent"
r={normalizedRadius}
cx={radius}
cy={radius}
/>
</svg>
</div>
)
}
ma to działać tak, że gdy zjeżdżam i jestem na odpowiednim poziomie to pojawia mi się ten komponent (dzięki AOS) i wtedy powinienem zmienić wartość strokeDashoffset za pomocą setStrokeDashoffset i pasek zacznie się zapełniać... problem w tym, że nie wiem jak to zrobić by zmienić state w momencie pojawienia się elementu. W dokumentacji (https://github.com/michalsnik/aos) znalazłem coś takiego:
AOS dispatches two events on document: aos:in and aos:out whenever any element animates in or out, so that you can do extra stuff in JS:
document.addEventListener('aos:in', ({ detail }) => {
console.log('animated in', detail);
});
document.addEventListener('aos:out', ({ detail }) => {
console.log('animated out', detail);
});
problem w tym, że nie wiem jak mogę tego użyć do zmiany state'a.