Please take a look at the new and improved portfolio written in Typescript and built with React! New Portfolio
View Code
const AboutTitleRef = useRef();
const [TitleVisible, setTitleVisible] = useState();
useEffect(()=>{
const observer = new IntersectionObserver(([entry])=>{
setTitleVisible(entry.isIntersecting)
console.log(TitleVisible)
});
observer.observe(AboutTitleRef.current)
},[AboutTitleRef,TitleVisible]);
return(
<AboutTitle ref={AboutTitleRef} inView = {TitleVisible}>
About
</AboutTitle>
)
export const AboutTitle = styled.div`
transition: 3s all ease;
opacity: ${(props) => (props.inView ? "1" : "0")};
`;
View Code
constructor(){
super()
this.state = {
checked : false
}
this.checkRef = React.createRef();
this.handleCheckbox = this.handleCheckbox.bind(this);
}
handleCheckbox(event){
if(event === true){
//this is if the checkbox is checked
this.setState({
checked : event
},() => {})
}
if(event === false){
//this is if the checkbox is not checked
this.setState({
checked : event
},() => {})
}
};
render(){return(
<Checkbox
ref = {this.checkRef}
onChange = {(e) => this.handleCheckbox(e.target.checked)}
/>
)}
View Code
function App() {
const [lightordark, setLightOrDark] = React.useState(false)
return (
<div className='remove_scroll'>
<ParticlesComponent active = {lightordark}/>
<MainPage setLightOrDark = {setLightOrDark}/>
</div>
);
};
Thanks for stopping by!