How do I share an image with text on Whatsapp in reactjs?

Question

I have tried sharethis-reactjs https://libraries.io/npm/sharethis-reactjs and also react share https://www.npmjs.com/package/react-share.

All I am able to do is send the url or some text across , I want to send an Image with some text (only image is also fine).

The answers on the internet is only to react-native , I am looking for a solution in reactjs. I am creating a PWA so it will be working in mobiles.

<InlineShareButtons
      config={{
        alignment: 'center',  // alignment of buttons (left, center, right)
        color: 'social',      // set the color of buttons (social, white)
        enabled: true,        // show/hide buttons (true, false)
        font_size: 16,        // font size for the buttons
        labels: 'cta',        // button labels (cta, counts, null)
        language: 'en',       // which language to use (see LANGUAGES)
        networks: [           // which networks to include (see SHARING NETWORKS)
          'whatsapp',
          'linkedin',
          'messenger',
          'facebook',
          'twitter'
        ],
        padding: 12,          // padding within buttons (INTEGER)
        radius: 4,            // the corner radius on each button (INTEGER)
        show_total: true,
        size: 40,             // the size of each button (INTEGER)

        // OPTIONAL PARAMETERS
        url: '', // (defaults to current url)
        image: '',  // (defaults to og:image or twitter:image)
        description: 'custom text',       // (defaults to og:description or twitter:description)
        title: 'custom title',            // (defaults to og:title or twitter:title)
        message: 'custom email text',     // (only for email sharing)
        subject: 'custom email subject',  // (only for email sharing)
        username: 'custom twitter handle' // (only for twitter sharing)
      }}
    />

Can someone please tell me what I can enter in the image=" " to share an image or any other way to share an image in react js

Answer 1

You can use Web Share API in your React.js web application to share text, URLs, and files. With the Web Share API, web apps are able to share text, URLs, and files to other apps installed on the device in the same way as native apps.

Web Share API has some limitations:

• It can only be used on a site that supports HTTPS.
• It must be invoked in response to a user action such as a click. Invoking it through the onload handler is impossible.
• As of mid-2020, it is only available on Safari and on Android in Chromium forks.

https://web.dev/web-share/

Following code can be used to share text and URL along with an image:

const handleOnSubmit= async()=> {
  const response = await fetch(image);
  // here image is url/location of image
  const blob = await response.blob();
  const file = new File([blob], 'share.jpg', {type: blob.type});
  console.log(file);
  if(navigator.share) {
    await navigator.share({
      title: "title",
      text: "your text",
      url: "url to share",
      files: [file]     
    })
      .then(() => console.log('Successful share'))
      .catch((error) => console.log('Error in sharing', error));
  }else {
    console.log(`system does not support sharing files.`);
  }
}

useEffect(()=> {
  if (navigator.share === undefined) {
    if (window.location.protocol === 'http:') {
      window.location.replace(window.location.href.replace(/^http:/, 'https:'));
    } 
  }
}, []);