This error occurs when trying share via clipboard and forced into fallback mode (http://localhost:3000) in Chrome and stock browser. Works fine on PC

TypeError: cannot read property 'writetext' of undefined

The Twitter logo is out of date on this component: https://about.twitter.com/en/who-we-are/brand-toolkit

I'm using RWebShare in my nextjs app, but having an issue with the onClick callback - it fires on desktop browsers (chrome and firefox). On mobile it fires on Firefox, but doesn't seem to work on mobile chrome. It's a bit of an issue for me as the onClick callback sends some information to my database. Has anyone else had similar issue?

#10 (comment)

Trying to share on socials with a image included. Is there a way to achieve this? Shared an example below.

When I share any url with whatsapp or twitter etc., my message looks like this
THE MESSAGE**
(some text about my campaign)

For more details visit this link
(whitespace)https://example.com

I would appriciate if u remove it

Hi,

Is it possible to add LinkedIn to the icon/list.tsx?

linkedin: {
path: (
<path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z" />
),
color: "#0073b1",
e: (l, t) => window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${l}&title=${t}&summary=${t}&source=${l}`)
}

Hey this is really nice.

A few suggestions

• When using the link copy button, it would be really nice to get a little bit of feedback rather than the dialog just disappearing suddenly
• It would be nice to get a styling API, right now I've had to use !important to override the styling for the UI. Let me know if there's a better way
• Just a nitpick with the component name - it's a bit odd to have the React in the name abbreviated to R, kind of non standard. I would simply change it to import { ReactWebShare } from 'react-web-share' or make it a default export.

No big deal either way, this is really helpful!

Pressing on this button to copy the link to share

it copies the link encoded in url format.

so for instance, https://canitravel.net/countries?from=portugal&passport=portugal&sort=open
becomes
https%3A%2F%2Fcanitravel.net%2Fcountries%2F%3Ffrom%3Dportugal%26passport%3Dportugal%26sort%3Dopen

how to fix this.

There are no styling options for the background of the pop-up or the button
I'd like to make these improvements, please assign this to me

It doesn't open share for mobile and even with desktop share, it keeps me an error (TypeError: cannot read property 'writetext' of undefined), all this in localhost...

Is there a way to get the share screen to work on a dialog box? It works when I use an image icon. However, when I have extra menus, I am unsure on how to get it to work.

https://codesandbox.io/p/github/don1257919/webshare/draft/bold-pateu?import=true&file=%2FREADME.md&workspace=%257B%2522activeFileId%2522%253A%2522cl7t8c1jn0001lmf5ffyzglkx%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522sidekickItems%2522%253A%255B%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522cl7t8d1u90084356fdy89m5l8%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522key%2522%253A%2522cl7t8cyax0066356fudbditr1%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D

Working properly for mobile view but not working on Desktop
<RWebShare
data={{
text: "Like humans, flamingos make friends for life",
url: "https://on.natgeo.com/2zHaNup",
title: "Flamingos",
}}
onClick={() => console.log('shared successfully!')}
className={classes.divRight}
style={{
cursor: 'pointer',
}}>
<ShareIcon style={{ color: '#171717', fontSize: '18px' }} />

Hello 👋 !

I wanted to know if there is any possibility to get a props (eg: closeTitle) attached to RWebShare component for customizing the close button text ?

Thx in advance for your answer ! 😉

Whatsapp links use the url https://api.whatsapp.com which doesn't work, shouldn't it be https://web.whatsapp.com instead?

add plz Vk.com ok.ru tiktok

Describe the bug
Copy functionality shows different behavior in desktop/mobile
On desktop it copies only the link.
On mobile app it copies data+link

Expected behavior
The copy functionality should copy data+link in desktop too

Given the atrocious cross browser support:
https://caniuse.com/?search=clipboard

You might want to include something like:
https://www.npmjs.com/package/copy-to-clipboard

You can add Instagram or I can help you. Thank you

I basically created the dynamically generated page which opens through url in next-app
And the problem is that when I sharing the url on FaceBook through react-web-share it is not work properly, but when with same url is share on WhatsApp and Twitter then it works properly.
I am not getting the solution regarding issue, so please help me for this issue.

Hey, firstly thanks for the amazing package.

I noticed that the url that I pass to the component via data prop is actually URL encoded.
https://github.com/harshzalavadiya/react-web-share/blob/0b3d5ef70c6719e1f7982f88435a14143a6af8af/src/index.tsx#L18 this is the code responsible for the same.

Correct me if I am wrong, there shouldn't be a need to encode the url here. And in fact the package should assume that the URL provided by the user is correct. If not, then it is user's fault.

For example:

I passed this

url: `${window.location.origin}/view`

and the URI for the navigator.share came out in this format

<current_pathname>/encoded(<origin>/view)

For instance I would like to share this url https://canitravel.net/countries/?from=176&passport=176
as you can see there are from and passport as parameters in the above link

on whatsapp the request made would be

https://api.whatsapp.com/send?text=https://canitravel.net/countries/?from=176&passport=176

which results in https://canitravel.net/countries/?from=176, missing the passport parameter

I think it would be only a matter of encoding the url in the text parameter of the request to whatsapp.

What do you think, would it be possible?

Thanks,

Super nice component by the way!

I want localize close button, but i dont know how, tnx

Describe the bug
I can't select a sharing option on web as the mouse is not visible (ok on mobile)

eslint-plugin-simple-import-sort is listed under dependencies instead of devDependencies, which causes it to get included in the production dependency graph.

https://github.com/hc-oss/react-web-share/blob/master/package.json#L20

Hey, great package thank you for making this available!

I see instagram isn't one of the available sharing options though, do you think it's simple to add it? I need ig sharing in my platform, let me know if you plan on doing that soon or if I need to switch to another sharing tool.

Best regards

Describe the bug
After building for production, the RWebshare component doesn't work on mobile browsers (it works on mobile browsers using development server). Only the original web share API works, and the RWebshare UI doesn't render, or the onClick callback does not fire.

I am using Nextjs, so perhaps its an issue with the build.

I really need to onClick callback in my app, so this is causing me quite a headache.

Sandbox / Git Repo
Here is a repo that works fine in local development, but not on mobile browsers in production:
https://github.com/strangecarr/ts-nextjs-tailwind-starter.git
https://web-share-de

Also, see web browser screencast of the webshare component in local dev vs production:

Development server (working - the onClick callback fires an alert popup)
https://user-images.githubusercontent.com/52605713/213854889-93ace864-bbb3-4185-9bfb-6eebd19cf96a.mp4

Production (not working):
https://user-images.githubusercontent.com/52605713/213854813-e427d3b6-689e-42c9-a5f3-b46e8e837275.mp4

Can't use "
" or "\n" in my string for line breaks in my text string

Is it possible to feed in the site that the url has been shared to into the onclick callback function? e.g. so its possible to record which sites (facebook, whatsapp, email etc) are being used?

Would be great to know if/when the user taps on this and has shared.

Hey @harshzalavadiya, Thank you for this amazing package. I'm very happy to be able to use it.
I just wanted to flag that the "option" prop described in the readme is actually "sites".

For example

<div className="share-button-container">
  <RWebShare
    data={{
      text: "texte",
      url: window.location.href,
      title: "title",
    }}
    sites={["facebook", "whatsapp", "mail", "copy"]}
  >
    <button className="share-button">Share the message</button>
  </RWebShare>
</div>

Also, I was wondering if there was a way to custom the style of the fallback? I'd like to change the colors and the icons but I'm not sure what's the best way to proceed...

Again, thank you very much for your work.

Have a nice one!