Feature request: Customizable button

[FrenchMajesty]

aHi,

This is great library, thank you for creating it. One problem I had though was that, it was hard to make this button work on my page. I don't want to use fixed values for width and/or height because it cause problems in my responsive UI.

On mobile:

On tablet:

My solution was to do this:

<AppleLogin designProp={this.getAppleButtonStyle()} />

    getAppleButtonStyle = (): any => {
        const parent = ReactDOM.findDOMNode(this.card.current) as HTMLDivElement;
        if(!parent) {
            this.forceUpdate();
            return {};
        }

        return {
            height: 40,
            width: (card.offsetWidth > 380 ? 370 : card.offsetWidth) - 52,
            color: "black",
            border: false,
            type: "continue",
            border_radius: 5,
            scale: 1,
            locale: "en_US", 
          }
    };

It works however hacks like this don't feel as clean as they could be. Be able to set a width of 100% would be great.

I looked into Apple's documentation and it doesn't seem like it supports doing that. Especially since the button is really an image generated by their API. That image seems to have constrains and breaks when dimensions are too un-proportional (thus the conditional checking for 380 since it's the breaking point for a button of height 40)

What could be done instead is simply ditch the image and let developers create a custom button using render prop.

Another alternative would be to support width: 'max' then the library calculates the max width based on the height given in the background. I don't think anyone these days aren't making responsive applications. It's the standard. It's a blunder on Apple's part to not support them but this would be a nice workaround to provide developers

[patelmayankce]

@FrenchMajesty , Thank you for using this library.

You are absolutely right apple is not providing any support with max-width, and that is the reason we have render prop so anyone can set their own HTML as per need.

Also if we look at the min/max height & width of Apple support, it is not proportionally designed.

You can always have access to modify the style of elements from component so you can always apply CSS on it.

[FrenchMajesty]

I don't know how I did not see the render prop. Welp thank you for your quick response

[AngelDev0329]

How are you?

I am going to change the width of button. When designProp.width=320, button is good, but once I change it with 300, button show error.

Could you guide me how can I change it for my project?

Thank you