# react-web-share

> Tiny Web Share API Wrapper with fallback for unsupported browsers

Latest version **2.0.2** (published 2022-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-web-share
pnpm add react-web-share
yarn add react-web-share
bun add react-web-share
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-10-27 |
| First published | 2020-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 22.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 67 |
| Author | harshzalavadiya |
| Maintainers | harshzalavadiya |
| Keywords | react, share, web-share, native, fallback, polyfill, component, tiny, lightweight |

## Links

- npm: https://www.npmjs.com/package/react-web-share
- Repository: https://github.com/hc-oss/react-web-share
- Homepage: https://github.com/hc-oss/react-web-share#readme
- Issues: https://github.com/hc-oss/react-web-share/issues
- npm.io page: https://npm.io/package/react-web-share

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.2 (latest) — 2022-10-27
- 1.0.18-alpha.2 (alpha) — 2021-04-22
- 2.0.1 — 2022-10-11
- 2.0.0 — 2022-09-08
- 1.1.6 — 2022-04-24
- 1.1.5 — 2022-03-18
- 1.1.4 — 2022-03-17
- 1.1.3 — 2022-02-15
- 1.1.2 — 2022-02-15
- 1.1.1 — 2021-12-30
- 1.1.0 — 2021-04-22
- 1.0.18 — 2021-01-21
- 1.0.18-alpha.1 — 2021-01-21
- 1.0.18-alpha — 2021-01-21
- 1.0.1-7.alpha — 2021-01-21
- … 21 more at https://npm.io/package/react-web-share/versions

## README

# react-web-share

Tiny [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) wrapper with fallback for unsupported browsers

[![GitHub Actions Status](https://github.com/hc-oss/react-web-share/workflows/NodeJS/badge.svg)](https://github.com/hc-oss/react-web-share/actions)
[![NPM](https://img.shields.io/npm/v/react-web-share.svg)](https://npm.im/react-web-share)
[![gzip](https://badgen.net/bundlephobia/minzip/react-web-share@latest)](https://bundlephobia.com/result?p=react-web-share@latest)

[![Edit react-web-share](https://codesandbox.io/static/img/play-codesandbox.svg)](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

### Mobile

![Mobile Preview](https://user-images.githubusercontent.com/5774849/188565874-177a6cc4-0521-4f14-8339-4c31f1476a5d.jpg)

### Desktop

![Desktop Preview](https://user-images.githubusercontent.com/5774849/188565984-5782d979-b57b-4b6d-9135-591f77ea8ee7.jpg)

## 📦 Example

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

const Example = () => {
  return (
    <div>
      <RWebShare
        data={{
          text: "Like humans, flamingos make friends for life",
          url: "https://on.natgeo.com/2zHaNup",
          title: "Flamingos",
        }}
        onClick={() => console.log("shared successfully!")}
      >
        <button>Share 🔗</button>
      </RWebShare>
    </div>
  );
};

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`                                       |

## 🌎 Sites

- facebook
- twitter
- whatsapp
- reddit
- telegram
- linkedin
- mail
- copy (Copy to Clipboard)
- vk
- okru

## 📜 License

MIT &copy; [harshzalavadiya](https://github.com/harshzalavadiya)

---
_Source: https://npm.io/package/react-web-share · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._