feature request: a new prop "style" for the layers in the ParallaxBanner component

[itenisz]

Feature Request

Describe the feature or behavior you would like to add considering the following:

Greetings!

In the case of ParallaxBanner component, there should be a new layer prop to set custom css style for an image. Currently this is is only for the ParallaxBanner component which is apply to 'parallax-banner' div, but that style dosent do anything on the layer div which is 'parallax-banner-layer-0'.

• Why would this new feature or change be useful?

In my case I tried to setup a background-color rgb overlay with opacity over the image, but the main style applies for the main component div.

With the new style prop on the image would be possible to set css directly on the image div, and use different styles for different images.

Proposed Changes

Need a new 'style' prop on the layer images, which exactly the same as the main component style prop.

[jscottsmith]

@itenisz Sounds reasonable!

How about just a generic props object that will get applied to the layer. That would cover style but also any other attribute a user may wish to add.

Would look something like this replacing ...yourLayerStyles with a React style object

<ParallaxBanner
    className="your-class"
    layers={[
        {
            image: 'https://foo.com/foo.jpg',
            amount: 0.1,
            props: {
                style: {
                    ...yourLayerStyles,
                },
             }
        },
        {
            image: 'https://foo.com/bar.png',
            amount: 0.2,
        },
    ]}
    style={{
        height: '500px',
    }}
>
    <h1>Banner Children</h1>
</ParallaxBanner>

Does this work for your use case?

[itenisz]

@jscottsmith Sure, if more configurable then even better!

Does this work for your use case?

[jscottsmith]

Ok, I'll add this in when I get the chance. Unless you wanna submit a PR?

[itenisz]

Ok, I'll add this in when I get the chance. Unless you wanna submit a PR?

No, I can wait. Thanks for the fast reply and for handling this!

[jscottsmith]

@itenisz Published 2.3.0

Try it out, let me know if there's any issues.

[itenisz]

@itenisz Published 2.3.0

Try it out, let me know if there's any issues.

I tried and working! Very cool things can be made.

I leave here some simple examples:

  //shadow overlay
  const parallaxProps = {
    style: {
      boxShadow: `inset 0 0 0 100vw rgba(40, 50, 60, 0.5)`,
    },
  }

// colorful gardient overlay
backgroundImage: `linear-gradient(to bottom, rgba(245, 246, 252, 0.32), rgba(117, 19, 93, 0.53)), url('${imagelink}')`,

@jscottsmith Thank you very much!

[jscottsmith]

You’re welcome — thanks for opening the issue.

[jonnydungeons]

This feature actually does not seem to work. I have this piece of code which renders the images just fine but no style override applied.

function renderAbout() {
  return (<ParallaxBanner
    className="aboutBanner"
    layers={[
        {
            image: '/assets/images/nfts/10001.png',
            amount: 0.9,
            props: {
              style: {
                boxShadow: `inset 0 0 0 100vw rgba(40, 50, 60, 0.5)`,
              }
            }
        },
        {
          image: '/assets/images/nfts/10002.png',
          amount: 0.2,
          props: {
            style: {
              boxShadow: `inset 0 0 0 100vw rgba(40, 50, 60, 0.5)`,
            }
          }
        },
    ]}
    style={{
      backgroundSize: '100vh',
      height: '100vh'
    }}
 />
  );
};