Trigger Native Share Intent :  Share text, url and files using JavaScript
Tags: react, vue, angular, javascript
Published: 2021-01-15 17:24:15

There are a lot of really new and exciting APIs that **[`navigator`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator)** exposes. I just came across **[`navigator.share()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)** that lets you share data like `url`, `text`, `title`, and `files` by triggering the native share mechanism on the device that you're running this on.

So you call it in your Web Apps and what you get in return are amazing native experiences like this:

![Native Share Intent on iOS](https://dev-to-uploads.s3.amazonaws.com/i/3p35gznslj3pxnyysiui.png)

![Share API on Edge](https://dev-to-uploads.s3.amazonaws.com/i/3gkcrzcsa52ec8nntqwa.gif)

Looks great, right? The specification of this Web Share API is still in the draft stage at the moment, and could change in the near future.

The browser support isn't that great either. At the time of writing this article, it's just supported by Desktop Browsers like Edge and Safari, and Mobile Browsers like Chrome and Opera for Android, Safari for iOS, and Samsung Internet.

![Share API - Browser Support](https://dev-to-uploads.s3.amazonaws.com/i/p1kw4y1xlu1l69vw7bi0.png)

That being said, you can still try it out and implement it in one of your Web Apps without breaking the world. Let's see how we can do that in some of the most used front-end frameworks(in Alphabatical order 😬) at the moment: Angular, React, Svete, and Vue.

So we'll see implementation of a very simple form that let's the user fill in things like title, url, text, and files, and then depending on whether something is supported by the browser or not, we'll either trigger a native share intent that share just title, url, and text; or something that shares a title, url, and files or just an alert saying the browser doesn't support this.

The business logic remains the same. It's JavaScript afterall. There's a function that handles the file change on an `input` `type="file"`. And then a function that actually handles the form submission and invokes native share by calling **[`navigator.share()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share)**

Since files are involved, we will first have to check if the files that we're trying to share could be shared or not. For that, we'll just use **[`navigator.canShare()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare)**. We'll share the files instead of a `url` if it returns `true`. Else we'll just share the `url` along with `text` and `title`.

NOTE: For the sake of simplicity, I've implemented things in just one single component. I'm also not explaining things step by step as I usually do to keep it brief. In case you have any trouble understanding anything, please do let me know in the comments below.

You can find a working source for all the mentioned technologies below:

## In Angular:

{% stackblitz angular-share-intent file=src/app/app.component.ts %}

## In React:

{% stackblitz react-share-intent file=src/App.js %}

## In Svelte:

{% codesandbox svelte-share-intent-2d877 initialpath=App.svelte %}

## In Vue:

{% stackblitz vue-share-intent file=src/App.vue %}

JavaScript is extremely powerful and can be used to do a lot of really interesting things that take the user experince of web applications to the next level. I've written another article where you could use **[`AmbientLightSensor`](https://developer.mozilla.org/en-US/docs/Web/API/AmbientLightSensor)** to determine the lighting conditions that the device is being used in, in order to automatically switch themes from Dark to Light or vice-versa. Check it out here:

{% link https://dev.to/angular/switch-themes-like-a-fox-based-on-ambient-light-in-your-angular-apps-nk9 %}

Hope you found this article interesting/helpful. In case you did, give it a like and share it with your peers who might find this useful. Also comment below mentioning use cases, where you find this useful or if you already have some ideas where you'd use this in your web apps.

Until next time! ✌🏻