react-web-share

Tiny Web Share API wrapper with fallback for unsupported browsers

![GitHub Actions Status](https://github.com/hc-oss/react-web-share/actions)
![NPM](https://npm.im/react-web-share)
![gzip](https://bundlephobia.com/result?p=react-web-share@latest)

![Edit react-web-share](https://codesandbox.io/s/react-web-share-46skt)

> 💡 most browsers restricts web share api only to https websites

✨ Features

- 🍃 Only ~6kb gzipped and no external dependencies
- 🌀 Uses React Portal
- ✌ Written w/ TypeScript

🔧 Installation

``bash npm i react-web-share # npm yarn add react-web-share # yarn`

`Preview`

`$3`

!Mobile Preview

`$3`

!Desktop Preview

`📦 Example`

`tsx import React, { useState } from "react"; import { RWebShare } from "react-web-share";

const Example = () => { return (


              data={{
          text: "Like humans, flamingos make friends for life",
          url: "https://on.natgeo.com/2zHaNup",
          title: "Flamingos",
        }}
        onClick={() => console.log("shared successfully!")}
      >


  );
};

export default Example;`

`👀 Props`

| Prop | Description | Type | Default | | --------------- | --------------------------- | -------------------- | --------------------------------------------- | |data | Share Object | {text, url, title} | {text: "", url: currentURL, title: "Share"}| |sites | sites | string[]| all platforms (see list below for key list) | |closeText | translate close | string| localise close text | |onClick| callback on sucessful share | | | |disableNative | disables native share | boolean | false` |

📜 License

MIT © harshzalavadiya

react-web-share

Tiny Web Share API wrapper with fallback for unsupported browsers

![GitHub Actions Status](https://github.com/hc-oss/react-web-share/actions)
![NPM](https://npm.im/react-web-share)
![gzip](https://bundlephobia.com/result?p=react-web-share@latest)

![Edit react-web-share](https://codesandbox.io/s/react-web-share-46skt)

> 💡 most browsers restricts web share api only to https websites

📦 Example

tsx
import React, { useState } from "react";
import { RWebShare } from "react-web-share";

const Example = () => {
  return (


              data={{
          text: "Like humans, flamingos make friends for life",
          url: "https://on.natgeo.com/2zHaNup",
          title: "Flamingos",
        }}
        onClick={() => console.log("shared successfully!")}
      >

);
};

export default Example;

👀 Props

| Prop            | Description                 | Type                 | Default                                       |
| --------------- | --------------------------- | -------------------- | --------------------------------------------- |
|

data | Share Object | {text, url, title} | {text: "", url: currentURL, title: "Share"}

|
|

sites | sites | string[]

           | all platforms (see list below for key list)   |
|

closeText | translate close | string

             | localise close text                           |
|

onClick

       | callback on sucessful share |                      |                                               |
|

disableNative | disables native share | boolean | false` |

react-web-share

react-web-share

✨ Features

🔧 Installation

`Preview`

`$3`

`$3`

`📦 Example`

`👀 Props`

🌎 Sites

📜 License

react-web-share

react-web-share

✨ Features

🔧 Installation

`Preview`

`$3`

`$3`

`📦 Example`

`👀 Props`

🌎 Sites

📜 License

Dist Tags