Generic share button

[Mitelak]

The issue is related to fact that there are also smaller local social networks that allow sharing content on them. Usually, they use a link with some params to do so.

I just start using this library and I face a situation I need to add a custom site to the list. I can do it manually but this library has some nice utils like opening a window in the center of the screen. Furthermore is nice to be able to do things using the same API not mess around.

I found this issue https://github.com/nygardk/react-share/issues/150 which also brings up that subject. My proposition is to expose the ability to create custom buttons using some CustomShareButton or GenericShareButton components.

In the simplest version it could look like:

<GenericShareButton url={there_is_ready_to_go_share_url}>
  <SomeCustomIcon />
</GenericShareButton>

but it could be extended by some custom props:

<GenericShareButton url={base_url} params={{ some: 'specified', query: 'params', to: 'add' }} >
  <SomeCustomIcon />
</GenericShareButton>

What do you think? If owners of repo give the green light to feature like this I can try to create PR for it 😃

[subodhcjoshi82]

Any update to give Custom Share button?

[The-Funk]

I would like to bump this issue. I really like this idea. At the moment, I'm kind of hiding the react-share button by having it encapsulate my own button. So for instance I have this because I prefer my Material-UI button style to the react-share icon and button style:

`

          <TwitterShareButton
            url={shareurl}
            title={title}
            resetButtonStyle={true}
            className={classes.buttons}
          >
            <Button color="twitter" round className={classes.buttons}>
              <i className="fab fa-twitter" /> Share
            </Button>
          </TwitterShareButton>`

This works for now, but it's not good practice to nest a button within a button. I think a better solution would be to implement a "button controller". I will probably try to do that myself. This way you can "bring your own button component" and style it however you want, but the controller would pass an onClick function to the child component.

To me, that would be the single simplest way to allow for custom button creation, icons, images, etc. By adding a "type" property to the controller users could easily create a fully customized button or bring in a previously created button component and use that with react-share functions. By defining what type of share button we want to create using the type property, the relevant onClick function could then be passed to the child button. This could include a "generic" type wherein the user has the option to override onClick manually and perform their own sharing task.

[Wamy-Dev]

I would like to bump this issue. I really like this idea. At the moment, I'm kind of hiding the react-share button by having it encapsulate my own button. So for instance I have this because I prefer my Material-UI button style to the react-share icon and button style:

`

          <TwitterShareButton
            url={shareurl}
            title={title}
            resetButtonStyle={true}
            className={classes.buttons}
          >
            <Button color="twitter" round className={classes.buttons}>
              <i className="fab fa-twitter" /> Share
            </Button>
          </TwitterShareButton>`

This works for now, but it's not good practice to nest a button within a button. I think a better solution would be to implement a "button controller". I will probably try to do that myself. This way you can "bring your own button component" and style it however you want, but the controller would pass an onClick function to the child component.

To me, that would be the single simplest way to allow for custom button creation, icons, images, etc. By adding a "type" property to the controller users could easily create a fully customized button or bring in a previously created button component and use that with react-share functions. By defining what type of share button we want to create using the type property, the relevant onClick function could then be passed to the child button. This could include a "generic" type wherein the user has the option to override onClick manually and perform their own sharing task.

I have been using this, but it gives a very annoying error about how a button component cannot be nested inside another one. Any way to fix this?

[Erwol]

When using MUI you can do the following to overcome the console warning and have a correct html:

import { Email } from '@mui/icons-material';
import { ButtonBase } from '@mui/material';
import React from 'react';
import { EmailShareButton } from 'react-share';

const ButtonWrapper: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => (
  <ButtonBase
    component={'div'}
    sx={{
      // any other style you would like to apply to your button goes here
      padding: '8px',
      borderRadius: '50%',
    }}
    centerRipple
  >
    {children}
  </ButtonBase>
);

type Props = {
  title: string;
  url: string;
};
export const GenericShare = ({ title, url }: Props) => (
  <EmailShareButton body={title} url={url}>
    <ButtonWrapper>
      <Email />
    </ButtonWrapper>
  </EmailShareButton>
);