How to use the UI Library Composites in other frameworks than React #4723
dmceachernmsft
started this conversation in
Show and tell
Replies: 1 comment
-
Hello @dmceachernmsft, Thanks for this simple tutorial for other framework integration! For information I used the same approach to wrap the Communication UI Library for Blazor and I started to make a NuGet package for the community : PosInformatique.Azure.Communication.UI.Blazor This library try to wrap the Communication UI Library by exposing only .NET APIs, which allows the developers to manipulate the UI Library without usage of JavaScript code. |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
The Azure Communication Services UI library is built in React and as such is best used inside react applications. However, your use case may differ, like having an existing application in another Node framework like Angular or VueJS.
This show and tell will highlight how you can create a wrapper function that will create a React node and mount it to your application's DOM. In this situation you are bringing React into your application along with our composites. With that lets look at some code.
Note: To Follow along with this show and tell you will need an Azure Communication Services resource and know how to mint Tokens and ID's from it.
Getting started
If you have your own application already you can skip this section.
We are going to need a node application to follow along with this show and tell. In our case we will use a Angular application since we are wanting to highlight how this is beneficial for platforms that are not React. We will create the application with the following command
This will create a new Angular application after it completes. Open that application in VS code when the generation of app is completed.
Updating your Dependencies
In your Node application you will need to update the dependencies that you are working with. Add the @azure/communication-react package with the following command:
Next we will want to add React as a dependency. The command to that is as follows:
We want to also install react-dom as we are going to be using this to attach the react node to your applications DOM. You will see the following dependency array updates in your package.json
Writing the Wrapper
Depending on what framework you are working with and your configurations you might be using JavaScript or TypeScript. In this show and tell we will work with TypeScript to have strong typing in the wrappers we are going to write to help avoid bugs. If you're using JavaScript and curious, checkout how to use TypeScript.
In this show and tell we are going to focus on Angular as a platform. Regardless of your framework however, it is important to note that you should be calling the function we are going to write when your application has access to the window object. It is best to know your frameworks component lifecycle so be sure to check out your framework's documentation regarding this. Linked below are some common frameworks documentation on the topic:
With that cleared up, let's look at some code.
Where ever you want to keep the wrapper function, create a new file called
acs-react-wrapper.ts
. After you have done that add the following code toacs-react-wrapper.ts
. In our example we are going to use the CallComposite.acs-react-wrapper.ts
This function that we have created does a few things:
AzureCommunicationCallAdapter
, this is the brains of the calling experience that we are making in this instanceHTMLElement
from your DOM and attaches a react node to itCallComposite
inside this new react nodeUsing the Wrapper
Like stated earlier, we are going to be using Angular for this tutorial. We are going to keep it simple and use the component that they give us for free when creating a new application. In Angular a component is broken up into 3 files:
app.component.ts
app.component.html
app.component.css
First we will look at the code for the
app.component.ts
file.Next we will look at the change for the template. We want to add a div with the same id that we are specifying in the Angular component we just updated. That will look something like this somewhere in your application's template in this case the file
app.component.html
added anywhere inside thebody
of the template.Finally we will want to set some styles constraining the composite. In this show and tell we will have the composite in a container, rendering above the page. We will add those styles to the CSS that goes with the component in
app.component.css
Once we have done these 3 things we are good to go with running our app. In the case of this show and tell we use the following command to start the app.
to run the application and see the following:
You now have a React composite inside your Anuglar application!
Beta Was this translation helpful? Give feedback.
All reactions