How to use Third-Party JavaScript(JS) Libraries in LWC?

Third-Party JavaScript
Developer, LWC, Salesforce

Third-party JavaScript libraries are pre-written JavaScript code packets that are developed to make the developer’s tasks easier, such as DOM manipulation, event handling, animations, and visual effect creation. We use these libraries in web pages with a tag or we install them using package managers like npm.

Using Third-Party JavaScript(JS) Libraries in LWC

We can use third-party JavaScript libraries in LWC with the help of a Salesforce feature called static resources. We use these libraries in our component to decrease the complexity of the code. For example, we use moment.js to validate and display dates and times.

Follow these steps to use third-party JavaScript libraries in Lightning web components:

Step-1: First, download the moment.js library from https://momentjs.com.

Step-2: Now, type “Static Resources” in the Quick Find box of the Setup page of your Salesforce org.

Step-3: On the Static Resources page, click the “New” button to create a new static resource. Following this, fill up all static resource information, upload the moment.js file, and click the “Save” button.

Third-Party JavaScript

Step-4: Then, open the “.js” file of the Lightning web component where you want to use the library.

Step-5: At this time, import the library from the static resource. Also, import methods from the platformResourceLoader module. 

import myLib from '@salesforce/resourceUrl/moment';
import { loadScript } from 'lightning/platformResourceLoader';

Note: loadScript is used to load JavaScript libraries. For more information about platformResourceLoader, see the lightning/platformResourceLoader reference docs.

Step-6: Finally, load the library and call its functions in a then() method like the code below:

loadScript(this, moment + '/moment.js').then(() => {
let currentTime = moment().format('LLLL');
});

Note: The platformResourceLoader module has two methods, loadScript, and loadStyle. We control the load sequence of our script or style using these methods.

Using Third-Party CSS Libraries in LWC

You can also use third-party CSS libraries in the same way. You just need to use the loadStyle method instead of the loadScript method from the platformResourceLoader module.

Please contact us at manish@bay20.com or call us at +91-8800519180 for any support related to Salesforce. You can also visit the Salesforce development page to check the services we offer.