Using External JavaScript Library And Its Method In Lightning Component

Following steps are used to load the external Java Script library in lightning component.

1. Load your external java script library in static resource. Goto >> SetUp>> Custom Code >> Static Resources
2. Use <ltng:require> tag to load the Java Script library in lightnig component as follows.

<!-- For one js library --> <!-- Here filename1 is static resource name --> <ltng:require scripts="{!$Resorce.filename1}"></ltng:require> <!-- For more than one js file --> <!-- Here filename1 and filename2 is static resource name --> <ltng:require scripts="{!join(',',                             $Resource.filename1,                             $Resource.filename2)}"></ltng:require> 

In this example we print the list of fruits which is predefined in external JavaScript library.

1). Create a js file as follows:

/**
 * Webkul Software.
 *
 * @category  Webkul
 * @author    Webkul
 * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */



window._map = (function() {
    var fruits = ["Mango", "Apple", "Banana", "Graps", "Pineapple"];
    return {
        getFruits: function() {
            return fruits;
        }
    };
}());

2). Upload the external js file/library in static resource.  Goto >> SetUp>> Custom Code >> Static Resources

3). Create a lightning component and write following code.

<aura:component >
    <!-- 
    /**
    * Webkul Software.
    *
    * @category  Webkul
    * @author    Webkul
    * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https://webkul.com)
    * @license   https://store.webkul.com/license.html
    */
    -->
    <ltng:require scripts="{!$Resource.fruits}"></ltng:require>
    <aura:attribute name="externalList" type="Array" ></aura:attribute>
    <div>
        <p> Click on button to show the name of fruits...</p>
        <lightning:button label="Show Fruits"
                          variant="brand"
                          onclick="{!c.getFruits}">
        </lightning:button>
        <aura:iteration items="{!v.externalList}" var="el">
            <p> {!el}</p>
        </aura:iteration>
    </div>
</aura:component>

4). Controller code.

({
	getFruits : function(component, event, helper) {
		var fruits = _map.getFruits(); // Get the list of fruits from external Java Script Library 
        console.log(fruits);
        component.set("v.externalList", fruits); 
	}
})

 # Lightning Component View

That’s all for How To Use External Java Script And Its Method In Lightning Component , still if you have any further query  or seek assistance to make your salesforce classic apps compatible with lightning experience, feel free to add a ticket, we will be happy to help you https://webkul.uvdesk.com/en/customer/create-ticket/.