Forem: Chris Brannen

Using the Web Share API in React

Chris Brannen — Thu, 11 Aug 2022 07:30:25 +0000

A guide to adding a Share button to a React app using the Web Share API.

The Web Share API allows a site to share text, links, files, and other content to user-selected share targets, utilizing the sharing mechanisms of the underlying operating system. Source: https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API

You can use the functionality to add a rich share experience to a site which accesses a device's Native Share, if supported.

Key Points

Web Share API doesn't have 100% coverage, as of Chrome 104 this only has partial support, so an approach is needed to ensure this is covered.

The Web Share API requires a https secure context.
The API has 2 methods navigator.canShare() and navigator.share() these can be used to check sharing support and call the systems share method.

Prerequisites

An already setup React app, this can be a Remix, Next.JS, Create React App or any other Framework as approach agnostic.

Step 1 - Adding Share Wrapper

In the React app create a folder called Share and add index.ts and Share.tsx files.

// index.ts

export { default as Share } from "./Share"

Exposing the Share functionality like this is optional but my preferred approach for constructing components.

// Share.tsx

import { type FC, useState } from "react";


const Share: FC<Props> = ({
  children,
  shareData,
  onInteraction,
  onSuccess,
  onError,
  disabled
}) => {
  const [openPopup, setOpenPopup] = useState(false);

  const handleNonNativeShare = () => {
    setOpenPopup(true);
  };

  return (
    <>
        {children}
    </>
  );
};

interface Props {
  children: React.ReactNode;
  shareData: ShareData;
  onSuccess?: () => void;
  onError?: (error?: unknown) => void;
  onInteraction?: () => void;
  disabled?: boolean;
}

export default Share;

The above starts to bootstrap the components required, and map out the component's props which we are exposing for use.

Worth noting in the Props ShareData is a Typescript language type hence not defining here.

The structure for following components is; a button which will call the navigator.share() functionality and enable the custom Share experience if the Web Share API isn't available.

Step 2 - Adding Share Controller

Add a file called ShareController.tsx this will be our button, however we are going to leave the content of the button open to the consumer to define via children prop in the Share.tsx file.

// ShareController.tsx

import { type FC } from "react";

const ShareController: FC<Props> = ({
  children,
  shareData,
  onInteraction,
  onSuccess,
  onError,
  onNonNativeShare,
  disabled,
}) => {
  const handleOnClick = async () => {
    onInteraction && onInteraction();
    if (navigator.share) {
      try {
        await navigator.share(shareData);
        onSuccess && onSuccess();
      } catch (err) {
        onError && onError(err);
      }
    } else {
      onNonNativeShare && onNonNativeShare();
    }
  };

  return (
    <button
      onClick={handleOnClick}
      type="button"
      disabled={disabled}
    >
      {children}
    </button>
  );
};

interface Props {
  children: React.ReactNode;
  shareData: ShareData;
  onSuccess?: () => void;
  onError?: (error?: unknown) => void;
  onNonNativeShare?: () => void;
  onInteraction?: () => void;
  disabled?: boolean;
}

export default ShareController;

The core part of this component is the handleOnClick function. It's worth noting this is an async method as the navigator.share method resolves with a Promise.

...
const handleOnClick = async () => {
    onInteraction && onInteraction();
    if (navigator.share) {
      try {
        await navigator.share(shareData);
        onSuccess && onSuccess();
      } catch (err) {
        onError && onError(err);
      }
    } else {
      onNonNativeShare && onNonNativeShare();
    }
  };

 ...

Just exploring the above in a bit more detail:

onInteraction - allows a consumer provided function to be called when the share button is clicked.

onSuccess - allows a consumer provided function to be called when successful.

onError - resolve any errors from Web Share API, note a user cancelling the native share dialog will call this method.

onNonNativeShare - handle the cases when a Native share experience isn't available.

I've included a prop to disable the button if required, but some considerations should be taken as to whether this is appropriate for your use case, in particularly regarding accessibility concerns.

Step 3 - Adding Custom Share Popup

Create a new file SharePopup.tsx and add the following:

// SharePopup.tsx

import { type FC, useState } from "react";

const SharePopup: FC<Props> = ({
  shareData,
  onClose,
  onError
}) => {
  const [state, setState] = useState<ShareState>("pending");

  const copyClicked = async () => {
    try {
      await navigator.clipboard.writeText(shareData?.url || "");
      setState("success");
    } catch (err) {
      onError && onError(err);
      setState("error");
    }
  };

  const getButtonText = (state: ShareState) => {
    switch (state) {
      case "success":
        return "Link copied";
      case "pending":
      default:
        return "Copy link";
    }
  };

  return (
    <div>
      <div>
        <div>
          <div>
            <div>
              <div>
                <h3>
                  {shareData.title}
                </h3>
                <button onClick={onClose}>
                  <span>Close Share</span>
                  <div aria-hidden="true">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="24"
                      height="24"
                      viewBox="0 0 24 24"
                    >
                      <g id="close">
                        <path
                          id="x"
                          d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"
                        />
                      </g>
                    </svg>
                  </div>
                </button>
              </div>
              <div>
                {state === "error" ? (
                  <div>
                      <p>
                        Unable to copy to clipboard, please manually copy the
                        url to share.
                      </p>
                  </div>
                ) : null}
                <input
                  value={shareData.url}
                  readOnly
                />
                <button
                  onClick={copyClicked}
                >
                  {getButtonText(state)}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

type ShareState = "pending" | "success" | "error";

interface Props {
  shareData: ShareData;
  onClose: () => void;
  onError?: (error?: unknown) => void;
}

export default SharePopup;

I've removed all styling from above and how you choose to implement the above is dependent upon your approach.

The core function is the copyClicked:

...
const copyClicked = async () => {
    try {
      await navigator.clipboard.writeText(shareData?.url || "");
      setState("success");
    } catch (err) {
      onError && onError(err);
      setState("error");
    }
  };
...

Worth noting again this is another async method. This is to handle to case when native support isn't available, to copy the shareData's url prop calling the navigator.clipboard.writeText() method. If this errors, perhaps due to permissions for example a message will appear to indicate a user should manually copy the text.

Step 4 - Combining the Components

Going back to Share.tsx if we now update to include our newly added components.

// Share.tsx

import { type FC, useState } from "react";

import ShareController from "./ShareController";
import SharePopup from "./SharePopup";

const Share: FC<WithColors<Props>> = ({
  children,
  shareData,
  onInteraction,
  onSuccess,
  onError,
  disabled
}) => {
  const [openPopup, setOpenPopup] = useState(false);

  const handleNonNativeShare = () => {
    setOpenPopup(true);
  };

  return (
    <>
      <ShareController
        shareData={shareData}
        onInteraction={onInteraction}
        onSuccess={onSuccess}
        onError={onError}
        onNonNativeShare={handleNonNativeShare}
        disabled={disabled}
      >
        {children}
      </ShareController>
      {openPopup ? (
        <SharePopup
          shareData={shareData}
          onClose={() => setOpenPopup(false)}
        />
      ) : null}
    </>
  );
};

interface Props {
  children: React.ReactNode;
  shareData: ShareData;
  onSuccess?: () => void;
  onError?: (error?: unknown) => void;
  onInteraction?: () => void;
  disabled?: boolean;
}

export default Share;

We forward a number of functions to the ShareController.tsx so now we can use the Share component by providing the appropriate ShareData prop.

Our consumer may look something similar to below:

// ShareConsumer.tsx
...
import Share from "./Share";
...
const shareData = {
  title: "Share",
  text: "Share message",
  url: "https://www.brannen.dev"
}
...
    <Share shareData={shareData}>
        <span>Share</span>
    </Share>
...

Conclusion

The Share.tsx provides a wrapper for the ShareController.tsx and SharePopup.tsx in order to access the Web Share API. This enables the Share Component to be imported into consumers and provided with shareData which triggers the end users Native Share experience or a custom Share Popup to copy the provided url.

On phone:

on Chrome browser

Further considerations

The Web Share API also enables sharing of Files see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share#parameters
The additional onInteraction, onSuccess and onError functions can be used to report sharing behaviour and issues if required.

What's the fastest way to populate an array in Javascript?

Chris Brannen — Wed, 02 Dec 2020 16:47:01 +0000

tldr

After comparing several methods, the below approach was the fastest way to populate an array.

const array = new Array(arraySize);
for(let i=0; i< arraySize; i+=1) {
    array[i] = {id: i, name:"test"};
}

Article

I recently read an article looking at the difference between coding methods used by "noobs" and "pros". Whilst several of the methods were useful demonstrations of neater and more efficient code, a few made me look at what was more performant.

The below 2 methods of populating an array seemed like a good example of this:

"Method 1"

const array = [];
for(let i=0; i< arraySize; i+=1) {
    array[i] = { id: i, name:"test" };
}

"Method 2"

const array = new Array(arraySize).fill(null).map((_, idx)=>({ id:idx, name: "test" }));

Whilst Method 2 may be considered cleaner code, does it actually perform better?

Well the answer is no!

Using a couple of benchmarking tools, JSBEN.CH and JSBench.me the method didn't perform as well as "Method 1".

As with all things there are multiple ways to populate arrays, so I thought I would test a few of these to see which might be the fastest. I used the two tools to test each of the approaches, which I ran 3 times and averaged the results.

Methods

I declared the arraySize as a const outside of the tests. For running them I used a value of 6.

"Method 1"

const array = [];
for(let i=0; i< arraySize; i+=1) {
    array[i] = { id: i, name:"test" };
}

"Method 2"

const array = new Array(arraySize).fill(null).map((_, idx)=>({ id:idx, name: "test" }));

"Method 3"

const array = [];
for(let i=0; i< arraySize; i+=1) {
    array.push({id: i, name:"test"});
}

"Method 4"

const array = [...new Array(arraySize)].map((_, idx)=>({id: idx, name: "test"}));

"Method 5"

const array = new Array(arraySize);
for(let i=0; i< arraySize; i+=1) {
    array[i] = {id: i, name:"test"};
}

Results

JSBEN.CH Link to Tests

Method	Run 1	Run 2	Run 3	Avg.	Rank
Method 1	2693921	2647128	2637345	2659464.667	2
Method 2	2296840	2239211	2250513	2262188	5
Method 3	2566325	2610068	2642650	2606347.667	3
Method 4	2615853	2366320	2525441	2502538	4
Method 5	2815441	2741250	2775356	2777349	1

JSBench.me

Method	Run 1	Run 2	Run 3	Avg.	Rank
Method 1	17303999.34	18669299.96	16783919.58	17585739.63	2
Method 2	6940740.02	6606290.3	6502288.05	6683106.12	5
Method 3	16096156.21	15486862.02	15490723.59	15691247.27	3
Method 4	12156381.37	11547434.73	11957833.35	11887216.48	4
Method 5	30680035.11	30626210.94	29888080.94	30398109	1

Each of the approaches showed that Method 5 performed better for each of the test runs.

Conclusion

As mentioned there are other approaches that can be taken to populate arrays. For the tests and comparison done here "Method 5" performed the best;

const array = new Array(arraySize);
for(let i=0; i< arraySize; i+=1) {
    array[i] = {id: i, name:"test"};
}

However there may be a different approach which outperforms this method. I think the main takeaway is whilst code may appear cleaner it, doesn't necessarily make that code more performant.