react-apple-login icon indicating copy to clipboard operation
react-apple-login copied to clipboard

Could you please describe the button customisation

Open dvago opened this issue 2 years ago • 1 comments

First of all thanks for the work done on this package.

I would like to ask you the possibility to either have an implementation within the package documentation or an example on how a custom component (e.g. a customised button with an svg logo) could replace the current generated image which points to https://appleid.cdn-apple.com/appleid/button?locale=en_US

Is seems like the designProps 99% of the time are generating a image which is corrupted but most importantly, what if I'd like to replace the image with let's say the above, an SVG icon?

It seems like there is a render method but there is no mention on how to use it or if there is, it's not so explicit.

Thanks in advance.

dvago avatar Jan 13 '23 12:01 dvago

You can pass a custom html to function render

  <AppleLogin
    clientId={'app.example.com'}
    redirectURI={'https://example.com/auth/apple/web'}
    scope={'email name'}
    responseMode={'form_post'}
    responseType={'id_token code'}
    designProp={{
      height: 36,
      width: 200,
      color: 'white'
    }}
    render={renderProps => (
      <button style={{
          appearance: "none",
          ...styles
        }}
        onClick={renderProps.onClick}
      >
        <span>                          </span>
     Login in with Apple          
     </button>
    )}
  />

Result ⬇️

image

carllewisc avatar Apr 19 '23 20:04 carllewisc