# react-mobile-share

> Provides an easy and simple way to share data (such as text, url and media) via mobile’s built-in share module. It is based on [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share).

Latest version **2.2.3** (published 2024-09-27) · MIT license · 0 weekly downloads

## Install

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

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.2.3 |
| Published | 2024-09-27 |
| First published | 2022-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 52 |
| Author | encoresky |
| Maintainers | rkencoresky |
| Keywords | react-share, react-mobile-share, react-social-share, react-android-share, react-ios-share, react-android-ios-share, react-web-share, react-web-mobile-share |

## Links

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

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.2.3 (latest) — 2024-09-27
- 2.2.2 — 2024-08-08
- 2.2.1 — 2024-08-08
- 2.2.0 — 2024-08-08
- 2.1.0 — 2024-08-08
- 2.0.0 — 2024-07-01
- 1.0.31 — 2024-01-19
- 1.0.30 — 2022-12-21
- 1.0.29 — 2022-10-14
- 1.0.28 — 2022-10-14
- 1.0.27 — 2022-10-06
- 1.0.26 — 2022-09-29
- 1.0.25 — 2022-09-22
- 1.0.24 — 2022-09-22
- 1.0.23 — 2022-09-22
- … 18 more at https://npm.io/package/react-mobile-share/versions

## README

# React-Mobile-Share

Provides an easy and simple way to share data (such as text, url and media) via mobile’s built-in share module.
It is based on [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share).

This works only with secure contexts (HTTPS).

## 💡 Features

- Lightweight
- Share text, url and images
- Works on Android and iOS

## 🔧 Installation

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

## 🖥️ Demo

[![Try with CodeSandbox](https://img.shields.io/badge/Edit%20with%20CodeSandBox-000000?style=for-the-badge&logo=codesandbox&logoColor=white)](https://codesandbox.io/s/react-mobile-share-example-r11kjs?file=/src/App.js)

## 📱 Preview

![Android](https://raw.githubusercontent.com/encoresky/react-mobile-share/main/sample-android-share.png)   
![iOS](https://raw.githubusercontent.com/encoresky/react-mobile-share/main/sample-ios-share.png)

## 📦 Usage

```tsx
import { shareOnMobile } from "react-mobile-share";

const imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2...";

const App = () => {
  return (
    <div>
      <button
        onClick={() =>
          shareOnMobile({
            text: "Hey checkout our package react-mobile-share",
            url: "https://www.npmjs.com/package/react-mobile-share",
            title: "React-Mobile-Share",
            images: [imgBase64],
          })
        }
      >
        Share
      </button>
    </div>
  );
};

export default App;
```

## 👀 API References

#### Functions

```
  shareOnMobile(data, fallbackFn)
```

Takes the following parameters:

| Parameter    | Type       | Description                   |
| :----------- | :--------- | :---------------------------- |
| `data`       | `object`   | **Required**                  |
| `fallbackFn` | `function` | **Options**: return a message |

#### Data Object (1st Parameter)

```
{
    text: "Hey checkout our package react-mobile-share",
    url: "https://www.npmjs.com/package/react-mobile-share",
    title: "React-Mobile-Share",
    images: [imgBase64],
}
```

Object must contain the following fields:
| Field | Type | Description |
| :-------- | :------- | :-------------------------------- |
| `title` | `string` | **Required**. Must have a title.|
| `text` | `string` | **Optional**. Add a description. |
| `url` | `string` | **Optional**. Any valid url. |
| `images` | `array` | **Optional**. Should be a valid array of base64 strings. |

#### Fallback Function (2nd Parameter)

```
function(message) {
    console.log("fallback", message)
}
```

This will invoked when any failure occurs.

## 📜 License

[MIT](https://github.com/encoresky/react-mobile-share/blob/main/LICENSE)



## 🤝🏼 Contributions

We welcome pull requests! Explore open issues to find opportunities to contribute or open a new issue to share your ideas or report bugs—your help improves this library

[Contribution Guidelines](https://github.com/encoresky/react-mobile-share/blob/main/CONTRIBUTION.md)

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