Comments (2)
Same here, I think the component needs a prop that takes a callback that runs when the user did share succefully, at least. Idelly handle success, error and finally. As it is right now there is no way to know if the user ever shared or not to update the data base counter that displays a badge on top of the icon the developer wraps with the button:
import { TwitterShareButton } from "react-share";
import { MyTwitterXIcon } from "../my-Icons-Path";
// this is a handle that would run and update your db counter once the user actually shares
const handleShareClick = ('TwitterShared') => { .... }
// then in your render
// Right now you can do pass the handler and trigger it on click, but user might never share cancelling
<div onClick={() => handleShareClick('TwitterShared')}>
// this is the component with the `url` prop, and `useClass` optional
<TwitterShareButton
url={isDevelopment ? 'https://www.google.com/' : url}
className='relative'
callback={ } // Developers need to pass the handler here so it runs on success
>
{ /* this is your own Icon you can do to match your styles, now an X */ }
<MyTwitterXIcon className="cursor-pointer hover:opacity-100" />
{ /* You can condition here the render of a badge that display the count you are storing on your db */ }
<RenderIf isTrue={articleViewsAndShares?.TwitterShared}>
{/* this is the badge */}
<div className='h-4 w-auto flex justify-center items-center bg-white shadow border border-1 border-gray-200 p-1 rounded-full absolute -bottom-1 -right-2 text-gray-500 text-xxs'>
{TwitterShared.count}
</div>
</RenderIf>
</TwitterShareButton>
</div>
from react-share.
Yes, thank you very much, I used the FB sdk to catch the share event.
const handleShare = () => {
window.FB.ui(
{
display: "popup",
method: "share",
href: process.env.REACT_APP_LINK_SHARE || window.location.href,
},
function (response: any) {
if (response) {
// shared success
} else {
// not share
}
}
);
}
}
<div onClick={() => handleShare()}>share</div>
from react-share.
Related Issues (20)
- defaultProps will be removed HOT 1
- Twitter Button Icon to X HOT 5
- EmailShareButton not working on safari web browser HOT 2
- Can not add any message to FacebookMessengerShareButton
- Support share to kakao talk
- react-share stopped working with react/ react-dom 17.0.2, and broken style text block showing in the twitter page HOT 6
- Missing `index.umd.cjs` in final build HOT 2
- Module not found: Error: Can't resolve 'react/jsx-runtime' in 'node_modules/react-share/dist' HOT 8
- While Sharing on Twitter the page says "Some error occured"
- Facebook Messenger not working
- type error HOT 1
- Any method is there which can return popup is blocked? HOT 1
- Feature Request - Support For Mastodon
- Not Working on Mobile browser HOT 3
- Consider moving away from the "title" attributes due to conflict with tooltips HOT 6
- Can we send Image inside email body using 'EmailShareButton'
- disabled prop not working properly
- FacebookMessengerShareButton API Error Code: 4202 on mobile device HOT 4
- How to share multiple images on social media in react-share
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-share.