OpenHarmony JS/TS third-party components are delivered in the form of OpenHarmony npm packages. Developed based on the traditional npm components, OpenHarmony npm shared packages come with specially designed project structures and configuration files, which allow code of OpenHarmony UI pages and resources to be shared across modules or projects. The OpenHarmony npm package enables multiple modules or projects to share code related to OpenHarmony UI and resources. You can go to the [official npm website](https://docs.npmjs.com/about-npm) to learn about basic functions and mechanisms of npm.
OpenHarmony JS/TS third-party components are delivered in the form of OpenHarmony npm packages. Developed based on the traditional npm components, OpenHarmony npm shared packages come with specially designed project structures and configuration files. Such a package enables multiple modules or projects to share code related to OpenHarmony UI and resources. You can go to the [official npm website](https://docs.npmjs.com/about-npm) to learn about the basic functions and mechanisms of npm.
## Searching for OpenHarmony JS/TS Third-Party Components
1.Watch the [OpenHarmony-TPC/tpc_resource](https://gitee.com/openharmony-tpc/tpc_resource) project on the Gitee website. You can find a component based on the directory index.
1.Find the [OpenHarmony-TPC/tpc_resource](https://gitee.com/openharmony-tpc/tpc_resource) project on the Gitee website. You can find a component based on the directory index.
2. Visit the [OpenHarmony website](https://www.openharmony.cn/mainPlay/tpc) and search for required third-party components by type, category, or keyword.
...
...
@@ -17,17 +17,17 @@ During application development, you can import JS/TS third-party components in t
2. Under **Terminal** project, go to the **entry** directory and run the target component's command to install the component. For details about the command, see "Download and Installation" of the third-party component on the OpenHarmony website.
The following uses the installation of the [vCard third-party component](https://growing.openharmony.cn/mainPlay/libraryMaps/vcard_595) as an example. Find the installation command in "Download and Installation" and then run the command.
The following uses the installation of the [vCard component](https://growing.openharmony.cn/mainPlay/libraryMaps/vcard_595) as an example. Find the installation command in "Download and Installation" and then run the command.
![npm-usage1.png](npm-usage1.png)
![npm-usage2.png](npm-usage2.png)
3.A **node_modules** file is automatically generated in the project folder. In this example, the downloaded third-party library is **@ohos\VCard** in the **node_modules** directory.
3.Check for the **node_modules** file, which is automatically generated in the project folder. In this example, the downloaded third-party library is **@ohos\VCard** in the **node_modules** directory.
![npm-usage3.png](npm-usage3.png)
4.The following dependency is automatically added to the **package.json** file:
4.Check for the dependency configuration, which is automatically added to the **package.json** file:
```
"dependencies": {
...
...
@@ -35,10 +35,10 @@ During application development, you can import JS/TS third-party components in t
}
```
5. Import the component to the file that wants to use the component.
5. Import the component to the file that plans to use the component.