CODEWITHSUNDEEP
javascriptreactjsreact-hooksmicrosoft-teamsshare-button
Tanya Tsodikovich
Tanya Tsodikovich

Reputation: 53

Integrating Microsoft Teams Embedded Share Button in React web app

Here is how I integrated Microsoft Teams Embedded Share Button in React:

Step 1: Add launcher.js script on my web app:

I took this script:

<script async defer src="https://teams.microsoft.com/share/launcher.js"></script>

And placed it in this useEffect:

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://teams.microsoft.com/share/launcher.js";
  script.async = true;
  script.defer = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, []);

Step 2 : Add an HTML element on my webapp with the teams-share-button class attribute and the link to share in the data-href attribute.

I took this given code:

<div
  class="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>

And I adjusted it to React:

<div
  className="teams-share-button"
  data-href="https://<link-to-be-shared>">
</div>

My problem is:

The button is displayed in a popup module and my Microsoft Teams Embedded Share Button is disappearing after first rendering of the popup module.

Upvotes: 0

Views: 1651

Answers (1)

Tanya Tsodikovich
Tanya Tsodikovich

Reputation: 53

I found a way to solve my problem.

The Microsoft Teams Embedded Share button is displayed in a popup module so I added the state in charge of displaying the popup modal, showPopupModal, as a second argument to the useEffect.

useEffect(() => {
  const script = document.createElement('script');

  script.src = "https://teams.microsoft.com/share/launcher.js";
  script.async = true;
  script.defer = true;

  document.body.appendChild(script);

  return () => {
    document.body.removeChild(script);
  }
}, [showPopupModal]);

Upvotes: 1

Related Questions