React DOM change component on window resize

Question

I need to change the logo when window width small than 768 but can't realize it. Must be responsive on window width changes. what is wrong with my code? thank you!

export default class Header extends Component {
    constructor(props) {
        super(props);
        this.state = {
            winWidth: 0
        };
        this.getWindowSize = this.getWindowSize.bind(this);
    }

    componentDidMount() {
        this.getWindowSize();
        window.addEventListener('resize', this.getWindowSize);
      }

      componentWillUnmount() {
        window.removeEventListener('resize', this.getWindowSize);
      }

      getWindowSize() {
        this.setState({ winWidth: window.innerWidth});
      }

    changeLogo(logo){
        if(this.state.winWidth < 768){
            logo = './images/small.png';

        }
        logo = './images/regular.png';   
    }


    render() {
        const {logo} = this.props;
        return (
               <div className="Header">
                 <img src={ this.changeLogo(logo) } alt="logo"/>
            </div> 
        )
    }
}

Nikolai Kiselev · Accepted Answer · 2020-03-07 14:40:11Z

3

Try to use CSS instead of JS to show different images based on the screen width.

<Header class="Header">
    <img src="./images/small.png" className="small-screen-logo" alt="logo"/>
    <img src="./images/regular.png" className="large-screen-logo" alt="logo"/>
</Header>

Display a small screen logo, if the screen size is more than 768px display the bigger screen logo

.small-screen-logo {
    display: block;
}

.large-screen-logo {
    display: none;
}


@media (min-width: 768px) {
    .small-screen-logo {
        display: none;
    }

    .large-screen-logo {
        display: block;
    }
}

If you use bootstrap you can achieve it with bootstrap classes:

<Header class="Header">
    <img src="./images/small.png" className="d-block d-md-none" alt="logo"/>
    <img src="./images/regular.png" className="d-none d-md-block" alt="logo"/>
</Header>

Suggested reading https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

In case you want to use JS you can add a method logo instead of changeLogo(logo).

logo() {
    return './images/' + (this.state.winWidth < 768 ? 'small.png' : 'regular.png') + '.png';
}

Then use it in render as following:

<img src={logo} alt="logo"/>

edited Mar 7, 2020 at 14:40

answered Mar 7, 2020 at 13:20

Nikolai Kiselev

6,6532 gold badges32 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kim B Over a year ago

Thank you, that is an alternative way but what if I need to realize it by react component with jsx

Kim B Over a year ago

that's perfect 🤩

Vaibhav Vishal · Accepted Answer · 2020-03-07 13:25:44Z

2

Use srcset in image tag to specify different src for different screen size:

<img srcset="https://placekitten.com/768/768 768w,
             https://placekitten.com/1366/1366 1366w"
     sizes="(max-width: 768px) 768px,
            1366px"
     src="https://placekitten.com/1366/1366" alt="placeholder kitten">

Use srcset to declare multiple sources of image, sizes to define which src is to be used in which condition.

Link to MDN docs for further reading.

answered Mar 7, 2020 at 13:25

Vaibhav Vishal

7,2487 gold badges32 silver badges51 bronze badges

Collectives™ on Stack Overflow

React DOM change component on window resize

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related