How can I use react-share with SpeedDial of Material UI?

Question

I'm trying to make a SpeedDial of social share buttons with React, react-share and SpeedDial from Material UI, but react-share requires that I use its buttons.

I have the following SpeedDial code:

const actions = [
    {icon: <FacebookIcon size={32} round />, name: 'Facebook'},
    {icon: <TwitterIcon size={32} round />, name: 'Twitter'},
    {icon: <WhatsappIcon size={32} round />, name: 'WhatsApp'},
    {icon: <TelegramIcon size={32} round />, name: 'Telegram'},
    {icon: <EmailIcon size={32} round />, name: 'E-mail'}
];


<SpeedDial
      ariaLabel="SpeedDial example"
      className={classes.shareButton}
      icon={<SpeedDialIcon icon={<ShareIcon/>} openIcon={<CloseIcon/>}/>}
      onClose={handleClose}
      onOpen={handleOpen}
      open={open}
      direction='up'
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
          onClick={action.onClick}
        />
      ))}
    </SpeedDial>

I don't know how can I trigger a share action from action.onClick. Is it possible?

yes, I'm using onClick on SpeedDialACtion and its working for me in other scenario — maxi-code, Feb 08 '22 at 11:25

score 1 · Answer 1 · answered Jul 01 '20 at 22:07

1

I found that I can pass the FacebookShareButton, for example, as icon os the SpeedDialAction.

answered Jul 01 '20 at 22:07

Raul de Araújo

43
7

have you found a solution to this? – rctplcs Nov 14 '20 at 14:06

How can I use react-share with SpeedDial of Material UI?

1 Answers1