hc-oss / react-web-share Goto Github PK
View Code? Open in Web Editor NEWTiny web share wrapper with fallback for unsupported browsers
Home Page: https://codesandbox.io/s/react-web-share-46skt
License: MIT License
Tiny web share wrapper with fallback for unsupported browsers
Home Page: https://codesandbox.io/s/react-web-share-46skt
License: MIT License
You can add Instagram or I can help you. Thank you
Hey this is really nice.
A few suggestions
!important
to override the styling for the UI. Let me know if there's a better wayR
, 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!
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
Can't use "
" or "\n" in my string for line breaks in my text string
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.
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
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 @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!
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!
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)
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
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' }} />
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...
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?
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 ! ๐
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
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
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.
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
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
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
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.
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)
The Twitter logo is out of date on this component: https://about.twitter.com/en/who-we-are/brand-toolkit
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}`)
}
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.