How We Can Use Third Party JavaScript Libraries With Lightning Components?

How We Can Use Third Party JavaScript Libraries With Lightning Components?

Third-party Libraries are used by most of the developers nowadays because Third-party libraries provide quick and easy work around that can save you a lot of time and help you avoid some lines and efforts while writing codes.

Third-party libraries usually fall in one of the following categories:
DOM manipulation libraries ( ex. jQuery, etc.)
Specialized Utility Libraries (ex. moment.js, numeral.js, etc)
UI Libraries (ex. Bootstrap, jQuery UI, etc.)
Data Visualization Libraries (ex. D3, Chart.js, Leaflet, etc.)
MVC Frameworks (ex. React, Angular, etc.)
How to use third party libraries in lighting components-

There is a whole lot of powerful features which are provided by the Lightning Framework. In lighting components, Functionalities by your library might not always work.
In lightning component, we need to add these libraries to a static resource, and then we can include the library by using tag <ltng:require>
Upload everything in zip format under static resources. And use them in <ltng:require> tag.

Example:-
<ltng:require styles=”{!$Resource.YourCSSResource}” scripts=”{!$Resource.YourJSResource}” afterScriptsLoaded=”{!c.afterScriptsLoaded}”/>

afterScriptsLoaded attribute is used to execute some javascript method after the script is loaded.
USE SCRIPTS
To include a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .app markup.
Using styles attributes, you can include the .css resources into the component or app and be using scripts attribute you can include the javascript resources into the component or page.
Here is an Example of aura component:

<aura:component>
<ltng:require styles=”{!$Resource.YourCSSResource}” scripts=”{!$Resource.YourJSResource}” afterScriptsLoaded=”{!c.libLoaded}” />
<div class=’mynamespace’>
<div class=”dropdown”>
<ul class=”dropdown-menu” role=”menu” aria-labelledby=”mLabel”>
<li role=”presentation”><a role=”menuitem” href=””>Action</a></li>
<li role=”presentation”><a role=”menuitem” href=””>Another action</a></li>
</ul>
</div>
</div>
</aura:component>

Class mynamespace, dropdown, dropdown-menu would be defined into the libraries.
This is the method of how one can use JS Function which will always execute after loading of the script.

({
libLoaded: function(component, event, helper) {
alert(‘ready to go’);
}
})

Here is the example of JQuery sortable. We have to add the JQuery resource in the page and use functions to perform the functionality.

USS CSS FRAMEWORKS

You can use bootstrap classes for CSS. After adding the Bootstrap resource, you need to add the class on the element.

Steps to include bootstrap in your lightning:
Download the salesforce.com optimized Bootstrap package.
Unzip that package and go to Setup > Build > Develop > Static Resources and click New.
Specify bootstrap as the Name, then click the Choose File button, and select the bootstrap.css in the dist/CSS directory of the unzipped bootstrap folder.

After adding bootstrap in static resources, you can use the classes of bootstrap to your component elements.
Ex:

<div class=”navbar-header”>
<a href=”#” class=”navbar-brand”>Accounts Details</a>
</div>

So, this is how you can implements the standard UI by third party libraries with your lightning components.

Pin It on Pinterest