How to catch the event of sharing the link on facebook successfully or the user does not share?

[quyphan97]

please help me. How to catch the event of sharing the link on facebook successfully or the user does not share?

[rolandin]

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>

[quyphan97]

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>