Easy and simple way to share data via mobile’s built-in share module.

Related tags

Learning resource react reactjs web-share web-share-api react-share react-mobile-share react-android-share react-ios-share react-android-ios-share react-web-share react-share-mobile reactjs-mobile-share
Overview

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.

This works only with secure contexts (HTTPS).

Features

  • Lightweight
  • Share text, url and image.
  • Works on Android and iOS

🔧 Installation

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

Demo

Try with CodeSandbox

Preview

Android    iOS

📦 Usage

import React from "react";
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",
            image : imgBase64,	
          })
        }
      >
        Share
      </button>
    </div>
  );
}

export default App;

👀 Props

📜 License

MIT © encoresky

You might also like...

Dead simple program to upload NFT data to IPFS via nft.storage

Dead simple program to upload NFT data to IPFS via nft.storage

NFTP The simplest way to publish files and folders to IPFS, with one command. 100% FREE to upload as much files as you want, powered by nft.storage. N

Dec 11, 2022

Interactive To Do List, draggable tasks, optimized for desktop and mobile screen sizes. It reserves data in local storage. Built with HTML, CSS, and JavaScript.

To Do List Interactive daily To-Do List Built With Major languages: html, css, javascript Frameworks: Technologies used: Webpack Live Demo Live Demo L

Aug 4, 2022

This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

Nov 4, 2021

A mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases.

This is a mobile web application to check the data on the total covid19 confirmed cases and deaths, check data for all countries with recorded cases. It also has a details page to check for the statistics for each region/state if available.

Jul 30, 2022

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

Nov 25, 2022

A fun way for people to share their favorite trips and destinations!

TRIP A fun way for people to share their favorite trips and destinations, and provide reviews for fellow travelers! Check out Trip at https://trip-des

Jun 3, 2022

A new way to share your readings with friends. Hope you like it!

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Sep 9, 2022

An easy and simple way to manage your financial transactions.

An easy and simple way to manage your financial transactions.

MyWallet An easy and simple way to manage your financial transactions. With MyWallet you can track your incomes and expenses and always keep track of

Nov 16, 2022

Microverse Module 02 Project: This is education project that allow user to add desire books to the list and also delete books. It makes use of local storage to preserve the data on the web browser.Built with HTML, CSS, JavaScript

Project Demo Live Demo AWESOME BOOK PROJECT Project allow user to add desire books to the list and also delete books. It makes use of local storage to

Dec 3, 2022
Comments
  • Image sharing isn't working with all apps in the mobile.

    Image sharing isn't working with all apps in the mobile.

    I have tried Your given CodeSandbox Demo project on my Safari and Chrome browser, Sharing working but Since you have provided the image Base64 string and that image is not getting shared with any app like Skype Slack.

    bug 
    opened by vishalchaturvediencoresky 0
Releases(v1.0.30)
Owner
EncoreSky Technologies
Web & Mobile application design and Development Company
EncoreSky Technologies
GitHub https://www.npmjs.com/package/react-mobile-share
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022
Catalogist is the easy way to catalog and make your software and (micro)services visible to your organization in a lightweight and developer-friendly way.

catalogist ?? ?? ?? ?? ?? The easy way to catalog and make your software and (micro)services visible to your organization through an API You were a pe

Mikael Vesavuori 11 Dec 13, 2022
Fun way to share some of your (already) public StackOverflow user data to the internet.

ProfileOverflow A simple app leveraging StackExchange APIs to show some StackOverflow accounts information. Made for fun during a weekend as practice.

Jacky Efendi 5 Sep 14, 2022
It shows an effective way to correct bus arrival information using data analytics based on Amazon Serverless such as Kiness Data Stream, Kinesis Data Firehose, S3, and Lambda.

Amazon Serverless를 이용한 실시간 버스 정보 수집 및 저장 본 github repository는 버스 정보를 주기적으로 수집하여 분석할 수 있도록, Amazon Serverless인 Amazon Kinesis Data Stream, Kinesis Data

John Park 4 Nov 13, 2022
Piccloud is a full-stack (Angular & Spring Boot) online image clipboard that lets you share images over the internet by generating a unique URL. Others can access the image via this URL.

Piccloud Piccloud is a full-stack application built with Angular & Spring Boot. It is an online image clipboard that lets you share images over the in

Olayinka Atobiloye 3 Dec 15, 2022
A simple way to share files and clipboard within a local network.

Shortcut Simple way to share files and clipboard with devices within a local network. Usage Run the ./shortcut executable. A browser window will be op

Dhamith Hewamullage 17 Mar 13, 2022
A minimalistic yet efficient way to stringify and revive instances via JSON.

json-instances Social Media Photo by Francisco J. Villena on Unsplash A minimalistic yet efficient way to stringify and revive instances via JSON. If

Andrea Giammarchi 11 Jun 23, 2022
The invoker based on event model provides an elegant way to call your methods in another container via promisify functions

The invoker based on event model provides an elegant way to call your methods in another container via promisify functions. (like child-processes, iframe, web worker etc).

尹挚 7 Dec 29, 2022
🎨 Beautify your github profile with this amazing tool, creating the readme your way in a simple and fast way 🚀 The best profile readme generator you will find ⚡

Demo Profile Readme Generator The best profile readme generator you will find! About | Technologies | Requirements | Starting | Contributing ?? About

Mauro de Souza 476 Jan 1, 2023
This package creates embeds and buttons in a very simple way using the whatsapp-web.js module for whatsapp

This package creates embeds and buttons in a very simple way using the whatsapp-web.js module for whatsapp

DeathAbyss 17 Jan 3, 2023