Utilizing a Shared UI Library in a React Application with TypeScript and PNPM

Welcome to this informative guide on importing and using a shared User Interface (UI) library in a React application using TypeScript and PNPM. This guide expands on a previous lesson where a shared UI library was built using React and TypeScript, and prepared for importation into a frontend React application. In this guide, we will delve deeper into the practical application of this shared UI library in a real-world project. The process of importing the shared library into a frontend application, initializing the state, and implementing a button component will be covered.

To begin with, it's crucial to understand the function of a shared UI library. It is a centralized module of reusable components that can be imported and utilized in multiple projects, enhancing code reusability and efficiency. Importing this shared UI library into the 

 file in the dependency section. However, for this guide, the app will be installed using PNPM and the workspace command will be added. This informs PNPM that a package is being sought inside the monorepository.

pnpm add shared-ui --filter frontend --workspace

Now you should be able to see that the package has been added into our project. 

"dependencies" : {
  ...
  "shared-ui": "workspace:*",
  ...
}

---
title: Utilizing a Shared UI Library in a React Application with TypeScript and PNPM
description: We are going import a ccomponent from a shared library into our main app.
privateVideoUrl: https://stream.mux.com/Ieg5fSJC7KCGaACvE3d1QSpPJgOe3MouptMXX02sLzyE.m3u8
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/sean-amarasinghe-monorepos-for-enterprise-developers-app/-/tree/main/Course%20App/module_3
---

# Utilizing a Shared UI Library in a React Application with TypeScript and PNPM

## Introduction

Welcome to this informative guide on importing and using a shared User Interface (UI) library in a React application using TypeScript and PNPM. This guide expands on a previous lesson where a shared UI library was built using React and TypeScript, and prepared for importation into a frontend React application. In this guide, we will delve deeper into the practical application of this shared UI library in a real-world project. The process of importing the shared library into a frontend application, initializing the state, and implementing a button component will be covered.

![Import a shared component](https://d2uusema5elisf.cloudfront.net/courses/monorepos-for-enterprise-developers/module_03/lesson_03.02/public/assets/shared-lib.png)

## Importing a Shared UI Library

To begin with, it's crucial to understand the function of a shared UI library. It is a centralized module of reusable components that can be imported and utilized in multiple projects, enhancing code reusability and efficiency. Importing this shared UI library into the `frontend` application requires adding it to the `package.json` file in the dependency section. However, for this guide, the app will be installed using PNPM and the workspace command will be added. This informs PNPM that a package is being sought inside the monorepository.

Sean Amarasinghe

We are going import a ccomponent from a shared library into our main app.

Welcome to lesson 2. In the last lesson we learned how to build a shared UI

then have it ready to be imported into our frontend React application.

learn how to import a shared UI library. We could add the shared UI library

inside our frontend applications package.json file in the dependency section,

but instead what we're gonna do is we are gonna install that app using pmpm.

And then we add workspace command so that we are saying to pmpm that we are

looking for a package inside our monorepository.

Great! Now you could see the package has been added into our project and we can

and import this file. So first let's get rid of this boilerplate code.

We will use useState to initialize our initial state for the clicked event.

We will initialize it to false. Now let's implement the button component

and we will set it to unclicked. Now we can look at the clicked state and then

So we will use pmpm filter frontend start.

It seems the application is running successfully and the button renders as

click on the button it is placed the clicked event. In this lesson we learn how

component from another module to our main React application. In this module we

shared repositories by creating a shared library within NX and gain practical

collaborative development and efficient code reuse. In the next module we will

modularizing our application with local libraries.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript