DEV Community

Raj Kumar
Raj Kumar

Posted on

How to implement mobile share module in ReactJS quickly?

Hello ๐Ÿ‘‹๐Ÿผ,

Thanks for reaching here.
Many people require a module which can share data through the default share feature available in our mobile phones(Android, iOS) as shown below :

Image description

I know it's very small things you can implement by using any 3rd party packages/modules available on the internet.

I have one quick solution for you, actually, we have a solution which is based on Navigotor.share().

You just need to install this package react-mobile-share

npm i react-mobile-share    # npm
yarn add react-mobile-share # yarn
pnpm i react-mobile-share # pnpm
Enter fullscreen mode Exit fullscreen mode

and use it like this :

<button
  onClick={() =>
      shareOnMobile({
        text: "Hey checkout our package react-mobile-share",
        url: "https://www.npmjs.com/package/react-mobile-share",
        title: "React-Mobile-Share",
      })
    }
  >
  Share
</button>
Enter fullscreen mode Exit fullscreen mode

That's all ๐Ÿ™‚, it will send data to mobile and prompt a sharing popup with the app suggestion that can handle your data.

Why should you use this

  • Don't need to manage extra code.
  • Small and lightweight.
  • Share text, url and images.
  • Works on Android and iOS.

You can also try a demo example with CodeSandbox

Thanks for reading this ๐Ÿ™๐Ÿป.

Top comments (2)

Collapse
 
xinlongchen865 profile image
Laoce

navigation.share็š„ๅ…ผๅฎนๆ€งๅคชๅทฎไบ†๏ผŒๅพˆๅคšๆต่งˆๅ™จ้ƒฝไธๆ”ฏๆŒ

Collapse
 
ankushppie profile image
Ankush Lokhande

Great work, keep up the good writing!