timhagn / gatsby-background-image

Lazy-loading React (multi)background-image component with optional support for the blur-up effect.
MIT License
253 stars 49 forks source link

BgImage not rerendering with updated prop #165

Closed bjrnschmdt closed 2 years ago

bjrnschmdt commented 3 years ago

Hi there,

when I use the BgImage wrapper component it does not rerender when props get updated.

Description

For example if I want to toggle the visibility of the BgImage wrapper component by changing the className with a useState hook the component does not render the component with the new className.

Steps to reproduce

import React, { useState } from 'react';
import { getImage } from 'gatsby-plugin-image';
import { BgImage } from 'gbimage-bridge';

const HeroImage = ({ image }) => {
    const [heroVisibility, setHeroVisibility] = useState(true);
    const isVisible = heroVisibility ? 'visible' : 'hidden';

    const pluginImage = getImage(image);

    useEffect(() => {
        //some logic to setHeroVisibility
    });

    return (
        <BgImage
            Tag="div"
            image={pluginImage}
            className={isVisible}
        >
            //some jsx
        </BgImage>
    );
};

Expected result

I expect the component to have the updated className on rerender when the State changes.

Actual result

No change in the className after rerender when State changes.

Comment

I will try to replicate the issue with gbitest but I thought maybe there is a quick answer to the issue.

Could it be related to this issue #135?

Thanks a lot for your help! And thank you for your work on this Plugin which is in my opinion very much needed. :-)

github-actions[bot] commented 3 years ago

Hi there! As @timhagn momentarily is the main contributor to this package, this issue has been automatically marked as stale because it has not had any recent activity. It will be closed if no further activity occurs, though we're open to suggestions on how to get more maintainers! Thank you for your contributions : )!

timhagn commented 2 years ago

Hi @bjrnschmdt,

have you read the README ; )? This should cover what you intended: Passed Props for styled-components and suchlike.

Best,

Tim.

bjrnschmdt commented 2 years ago

Hi @timhagn ,

thanks a lot for your reply! I must have read it over. Sorry for not seeing this and thank you for pointing me to the right spot in the readme.

Again thanks a lot and all the best Björn

timhagn commented 2 years ago

Hi @bjrnschmdt,

no problem at all, you're welcome : ). Sorry from my side for taking so long to reply, am currently swamped with work % ).

All the best to you,

Tim.