---
title: "StimulusJS social SHARE button"
author: "Yaroslav Shmarov"
date: "2024-08-21"
canonical_url: "https://blog.superails.com/stimulus-share-button"
markdown_url: "https://blog.superails.com/stimulus-share-button.md"
description: "If you are building a PWA, you might want to still allow users toto share an URL to current page, so that another user can open it in a browser."
tags: ["stimulusjs","social-share"]
license: "GNU AGPL v3. Credit Yaroslav Shmarov and link the canonical URL."
---

# StimulusJS social SHARE button

If you are building a PWA, you might want to still allow users toto share an URL to current page, so that another user can open it in a browser.

You could add a [copy URL to clipboard](https://blog.superails.com/stimulus-copy-to-clipboard) button, but a better approach would be to use the [Browser Navigator API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share).

Here's how it looks on desktop:

![Navigator API social-share-desktop](https://blog.superails.com/assets/images/social-share-desktop.png)

Mobile:

![Navigator API social-share-mobile](https://blog.superails.com/assets/images/social-share-mobile.jpeg)

Let's build the share button!

```shell
rails g stimulus social-share
```

```js
// app/javascript/controllers/social_share_controller.js
import { Controller } from "@hotwired/stimulus"
// <!-- Social Share Button -->
export default class extends Controller {
  static values = { url: String }

  // hide the share button if it's not supported by a browser
  connect() {
    if (!navigator.share) {
      this.element.hidden = true;
    }
  }

  share(event) {
    // prevent form submit & redirect
    event.preventDefault();
    // share!
    navigator.share({url: this.urlValue});
  }
}
```

Finally, add this button to any (or all) URLs in your app:

```ruby
button_to 'Share', '#', data: { controller: 'social-share', social_share_url_value: request.url, action: 'click->social-share#share'}
```

That's it!