Library Component Type in SharePoint Framework (SPFx)

The Library Component type in SharePoint Framework (SPFx) allows developers to build reusable modules or libraries. These libraries can include shared utilities, services, or components that can be referenced by other SPFx solutions, ensuring modularity, code reuse, and maintainability.

What is an SPFx Library Component?

A Library Component is a special type of SPFx project designed to encapsulate reusable code, such as.

Utility functions.
Common services (e.g., API handlers, logging).
React components or other UI elements.

How do you create a third-party SPFx library?

Step 1. Create a new project directory in your favorite location.

md corporate-library

Step 2. Go to the project directory.

cd corporate-library

Step 3. Create a new library by running the Yeoman SharePoint Generator.

yo @microsoft/sharepoint

Step 4. When prompted,

Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps to sites?: Yes

Which type of client-side component to create?: Library
What is your Library name?: CorporateLibrary
What is your Library description?: CorporateLibrary description

Step 5. Once the project is scaffolded, you'll see the library created with an index.ts file containing an export from the CorporateLibrary created.

Step 6. Open the solution in your favorite editor and navigate to src/corporateLibrary/CorporateLibraryLibrary.ts.

Step 7. A default method, name() has been created. Rename this method as follows.

public getCurrentTime(): string {
  return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
}

Step 8. Run gulp on the command prompt to see if everything builds fine.

How do you consume a third-party SPFx library?

Step 1. Run gulp bundle --ship from the root directory of the library solution. a simple gulp build does not work.

Step 2. Run the npm link from the root directory of the library solution. In this case, it would be from the corporate-library folder.

Step 3. Right after creating the symbolic link to your new SPFx library component, don't forget to run at least once gulp build. Compile your library component at least once in order to be able to import it as a module into a different project. Remember that the package.json says that "main": "lib/index.js", so that location needs to exist before any import attempt.

This will create a local npm link to the library with the name, which is provided in the package.json.

Step 4. Create a web part project in a separate project folder, so not in the library project folder structure. Name your web part CorporateWebPart.

Step 5. From the root of the new web part folder, run the command npm link corporate-library.

This will create a symbolic link to that locally built library into the web part and will make it available to your web part.

Step 6. Open the web part solution in your preferred editor and navigate to src/webparts/corporateWebPart/CorporateWebPartWebPart.ts.

Step 7. Add an import to refer to your library.

import * as myLibrary from 'corporate-library';

Step 8. Change the render() method as follows.

public render(): void {
  const myInstance = new myLibrary.CorporateLibraryLibrary();

  this.domElement.innerHTML = `
    <div class="${ styles.corporateWebPart }">
      <div class="${ styles.container }">
        <div class="${ styles.row }">
          <div class="${ styles.column }">
            <span class="${ styles.title }">Welcome to SharePoint!</span>
            <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
            <p>${myInstance.getCurrentTime()}</p>
            <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
            </a>
          </div>
        </div>
      </div>
    </div>`;
}

Notice that we're creating a new instance of the library, and then refer to the getCurrentTime() method to retrieve the current time string from the library.

Step 9. Test your web part by launching the local workbench and adding the web part to the page.

gulp serve

How to unlink the SPFx library?

Step 1. To unlink an SPFx library that was symlinked during development in your SPFx project, navigate to the SPFx project root folder and run the command.

npm unlink corporate-library

Step 2. To check the folder location of the SPFx library.

npm ls -g 'corporate-library'

Step 3. To remove the local npm link to the library, navigate to the SPFx library root folder and run the command.

npm unlink

Conclusion

SPFx library components are a powerful tool for creating reusable, modular solutions in SharePoint. By centralizing shared functionality, you can simplify development, improve maintainability, and ensure consistency across projects.