[Suggestion / feature request] DamlHubLogin from @daml/hub-react, onClick

I want to pass onClick callback to my rendered button via the render option, however at the moment I don’t think it’s possible, unless I’m doing something wrong here. The end goal is to toggle a loading state when I click login.

I’m guessing it’s due to this line

digital-asset/dabl-react/blob/4d15cf66dc506f682513914fe6c8d96cdf903ab7/src/login/DamlHubLogin.tsx#L205

      
        

            
    }
            
  } else {
            
    onLogin && onLogin(new PartyToken(tokenFromCookie));
            
  }
            
};
            

            
if (showButton) {
            
  if (options?.method?.button?.render) {
            
    const comp = options.method.button.render();
            
    return React.cloneElement(comp, {
            
      onClick: handleButtonLogin,
            
      children: [
            
        ...React.Children.toArray(comp.props.children),
            
        <span key="damlhub-login-custom-button-text">{text}</span>,
            
      ],
            
    });
            
  } else {
            
    return (
            
      <a id="log-in-with-hub" onClick={handleButtonLogin}>
            
        {text}
            
      </a>
        
      
    

What I’d like to be able to do is pass in a function that can set a state, eg isLoading, so when I click on the button, I can get some reaction

My component looks like this, and I want to pass an onClick to the LoadingButton componenet.

<DamlHubLoginBtn
        withButton
        withToken
        onLogin={(creds) => {
          console.log("ON LOGIN");
          if (creds) {
            login(creds, admin);
          }
        }}
        options={{
          method: {
            button: {
              text: "Log Into Wallet",
              render: () => (
                <LoadingButton
                  onClick={() => {
                     // I CANT GET IT TO LOG
                    console.log("HI");
                  }}
                  loading={false}
                  loadingPosition="end"
                  sx={{ margin: 1 }}
                  variant="contained"
                  fullWidth
                ></LoadingButton>
              ),
            },
          },
        }}
      />

Hi @rikotacards ,

Thanks for pointing this out! As you discovered, the library does not support custom onClick handlers at this time. I’ll need to think about how to best add support for this in a future release

Thanks!
and the only work around I can find is just to wrap the damlHubLogin component with a div or button in my app, then I do an onClick from there.
But then if I use withToken, that div wraps around the entire text input as well.