I am trying to do a skill bar that loads when the user scroll to that React.Js component. Currently I can't make it work. This is the code:
const Progress = ({done}: {done: string}) => {
const [style, setStyle] = useState({});
useEffect(() => {
window.onscroll = () => {
setTimeout(() => {
const newWidth = {
opacity: 1,
width: `${done}%`
}
setStyle(newWidth);
}, 200);
}
}, [done]);
return (
<div className={styles.bg}>
<div className={styles.graphContainer} style={style}>
{done}%
</div>
</div>
)
}
const SkillsComponent = () => {
return (
<>
<Container>
<h2>Skills</h2>
<div className={styles.bg}>
<div className={styles.graphContainer}>
<Progress done='90' className={`${styles.skills} ${styles.html}`}>HTML</Progress>
</div>
</div>
</Container>
</>
);
}
export default SkillsComponent;
this is the css code:
.graphContainer {
padding-top: 10px;
width: 100%;
}
.skills {
background-color: white;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
color: white;
}
.bg {
background-image: repeating-linear-gradient(90deg, white, #222222 3px, #222222 33.3%);
border: 2px solid #fff;
margin-bottom: 4em;
display: inline-block;
min-width: 100%;
}
.html {
width: 0%;
background-color: #3f50b5;
border-radius: 0px 12px 12px 0;
margin-left: 4px;
}
I am using Typescript and currently I am getting this error:
Type '{ children: (string | Element)[]; done: string; className: string; }' is not assignable to type 'IntrinsicAttributes & { done: string; }'.
Property 'children' does not exist on type 'IntrinsicAttributes & { done: string; }'.ts(2322)