Doesn't support rounded edges (or other glare props)

[LucidNinja]

🐛 Issue/Bug Report Template

Describe the bug
If using rounded edges for the component and there is a dark background, the tilt component doesn't honour the rounded edges.

To Reproduce
Steps to reproduce the behavior:

Exactly as in the Glare demo here: https://mkosir.github.io/react-parallax-tilt/?path=/story/react-parallax-tilt--glare-effect, but with a dark background.

import React from 'react';

import Tilt from '../../src';
import DefaultComponent from '../_DefaultComponent/DefaultComponent';

const GlareEffect = () => (
  <Tilt glareEnable={true} glareMaxOpacity={0.8} glareColor="#ffffff" glarePosition="bottom">
    <div style={{ background: black }}>
      <DefaultComponent />
    </div>
  </Tilt>
);

export default GlareEffect;

Expected behavior
It would be nice to be able to pass props down to the Glare Element (unless this is already possible and not clearly documented?). Or do you suggest just using CSS to override the glare-wrapper class?

Link to demo (required)
https://codesandbox.io/s/recursing-perlman-c09t3?fontsize=14&hidenavigation=1&theme=dark

Issues without a reproduction link are likely to stall.

Code snippets
As above or Codesandbox link.

Environment

• Browser: Chrome
• Version: "react-parallax-tilt":
• ...

Additional context
Add any other context about the problem here.

[LucidNinja]

Actually, even if I add the following:

.glare-wrapper {
  border-radius: 3rem;
}

There seems to be a bug in Safari both on desktop and iOS that causes square corners to show momentarily, before disappearing. Not sure why this is? I'll have a look into it further to see if a CSS bug?

[LucidNinja]

Actually, that can be fixed by adding the -webkit-mask-image property, as referenced here: https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b

[mkosir]

Hi @LucidNinja thanks for the detailed bug report and provided possible solution(s) 🚀
As you mentioned this can be added as css prop to .glare-wrapper class, but I would prefer the second option you proposed, passing it as a GlareBorderRadius prop?
I think if we add the prop to styleGlareWrapper object in /src/features/glare/Glare.ts it should work.
Would you like to take a stab at this and create PR?

[LucidNinja]

Ok I can give it a go!

[LucidNinja]

Hey @mkosir - adding the GlareBorderRadius prop to the styleGlareWrapper would have required me to change the constructor (from what I can see), so I created a private method inside Glare.tx and ran it during the render method. Not sure if that's the best way to tackle it, but it works. Let me know if you have any feedback. See #28

[mkosir]

Hey @LucidNinja, thanks for the PR, it looks great, I already merged it and created new release 1.5.0 🚀