Modify existing code to what Im more familiar with

#react #help #motivation #javascript

Hi all, I do not know if this is an acceptable question for this foram. But i haven't been lucky on Stack overflow.

My question is related to modifying some code I found online. I'm new to React. And Im trying to learn as i go. Currently Im stuck on making a blur on scroll component. But I have become familiar with a curtain way the structure should look. I will post the code I found first followed by what I am used to seeing. Any feedback is welcome. I ideally would like to modify this code into the way I understand But alternatively if somebody could show me how to implement this code as is that would also be amazing.

The code I found... Written entirely in the index.js file. And it has many functions. Please see link below.

https://codesandbox.io/s/crazy-turing-jivgb?file=/src/index.js:0-3520

The Structure I am familiar, Which is all inside of its own file linked to the App.js file. And the code is written inside of class Home extends Component. And towards the end the file gets called. And there is no state in the first code where there is in the second code. And the way it was explained is that state is to change values. So that all confuses me.

import React, { Component } from 'react';
import './Home.css';
import video from './home-bg.mp4';
import Parallax from '../Parallax';

class Home extends Component {
constructor(props) {
super(props);
this.state = {
text:"This is sample text",
text2:"This is sample text for text2",
count:0,
show:"",
show2:"",
}
this.update = this.update.bind(this);
}

componentDidMount() {
this.timerID = setInterval(
() => this.update(),
100
);
}

componentWillUnmount() {
clearInterval(this.timerID);
}

update(){
const counter = this.state.count;
const text = this.state.text;
const text2 = this.state.text2;
const letter = text.charAt(counter);
// Note: It'll be empty string for negative index
const letter2 = text2.charAt(counter - text.length);
const textlength = text.length + text2.length;
//let text += letter;
console.log("counter : " + counter + " / letter : " + letter);
console.log("counter : " + counter + " / letter2 : " + letter2);

if(counter <= textlength){
this.setState({
  show: this.state.show + letter,
  show2: this.state.show2 + letter2,
  count: this.state.count + 1,
});
}else{
  clearInterval(this.timerID);
}

};

render() {
return (

{/*

*/}

{this.state.show}

{this.state.show2}

);
}
}

export default Home;

I hope that i explained what i need clearly enough. But please let me know if you need more info.

If any body could assist in helping me with this it would be greatly appreciated.

Top comments (4)

Jordan Finneran • Feb 22 '21

Hey, I'm not a react expert.
But you can achieve what you want more simply than that example.
When you component mounts, you can add a eventlistener to the document, which should call a function.
That function can change the css property on the image to blur it.

Wayne • Feb 22 '21

Thanks for your feedback Jordan, I will try the eventlistener approach. I think for me I need to just sit through all this stuff and figure it out as i go. But i lack the patience to do that. I think it's mainly because i don't know if I'm on the right track or not. Thank you again for your guidance.

Jordan Finneran • Feb 22 '21 • Edited

You could add this to your react component:

componentDidMount() {
    document.addEventListener('scroll', this.handleScrollEvent);
  }

  componentWillUnmount() {
    document.removeEventListener('scroll', this.handleScrollEvent);
  }

In handleScrollEvent function (that you create) you can then use document.documentElement.scrollTop to find out how far down the page you are.
You can also use document.documentElement.scrollHeight to find out how long the page is.

Then you can do some maths with those two values to set the amount of blur you want on your image, for example using CSS filter e.g. filter: blur(4px);

One thing to watch out for is to make sure you blur maths to calculate what amount of blur to apply works when you scroll up and down.

Apart from the componentDidMount and componentWillUnmount, this is all plain JavaScript too, so would work for any other framework!
Hope that helps, let me know if you need any other help :)