CloudSponge Contact Picker in React 16.8+

ContactPicker.js

// The ContactPicker component handles the stuff you don't want to think about
//  when adding the CloudSponge Contact Picker to your React app or PWA.
// Usage:
// <ContactPicker cloudspongeKey="my-key-from-cloudsponge" options={{
//       selectionLimit: 5,
//       selectionLimitMessage: "That's too many contacts."
//     }}>
//   <button value="Add from Address Book" className="btn"></button>
// </ContactPicker>
// OR to launch the ContactPicker in response to an external setting/action:
// <ContactPicker open={isOpen} cloudspongeKey="localhost-only" options={{}}/>
// OR to create a deep link directly on one of the sources:
// <ContactPicker source="gmail" cloudspongeKey="localhost-only" options={{}}>
//   <button className="btn" value="Pick from your Google Contacts"></button>
// </ContactPicker>
import React from 'react';
import useScript from 'react-script-hook';

export default function ContactPicker({
  cloudspongeKey,
  options = {},
  source = null,
  open = false,
  children = null,
}) {
  const [loading, error] = useScript({src: `https://api.cloudsponge.com/widget/${cloudspongeKey}.js`});

  React.useEffect(() => {
    if (loading) return;
    if (error) return;
    if (!window.cloudsponge) return;

    // normal initialization here
    if (!open) return cloudsponge.init(options);

    // if open is true, then we'll need to wait for the
    //  cloudsponge object to finish applying the options
    //  before launching the Contact Picker UI.
    cloudsponge.init({
      ...options,
      afterInit: () => {
        options.afterInit && options.afterInit();
        launch();
      }
    });
  }, [loading, error, options, open]);

  const launch = () => {
    if (window.cloudsponge) {
      cloudsponge.launch(source);
    }
  }

  return (
    <span onClick={launch}>
      {children}
    </span>
  );
}