https://github.com/encoresky/react-mobile-share
Easy and simple way to share data via mobile’s built-in share module.
https://github.com/encoresky/react-mobile-share
react react-android-ios-share react-android-share react-ios-share react-mobile-share react-share react-share-mobile react-web-share reactjs reactjs-mobile-share web-share web-share-api
Last synced: 11 months ago
JSON representation
Easy and simple way to share data via mobile’s built-in share module.
- Host: GitHub
- URL: https://github.com/encoresky/react-mobile-share
- Owner: encoresky
- License: mit
- Created: 2022-08-16T10:34:12.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-09-27T07:11:42.000Z (over 1 year ago)
- Last Synced: 2025-06-16T22:51:58.544Z (12 months ago)
- Topics: react, react-android-ios-share, react-android-share, react-ios-share, react-mobile-share, react-share, react-share-mobile, react-web-share, reactjs, reactjs-mobile-share, web-share, web-share-api
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-mobile-share
- Size: 711 KB
- Stars: 50
- Watchers: 5
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
[](https://codesandbox.io/s/react-mobile-share-example-r11kjs?file=/src/App.js)
## 📱 Preview
## 📦 Usage
```tsx
import { shareOnMobile } from "react-mobile-share";
const imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2...";
const App = () => {
return (
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
);
};
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)