Import an external NPM library
This topic explains how to incorporate external React component libraries from NPM into your project. You'll learn how to install and import UI components from popular React libraries.
Install the library
Install the library locally
Use npm to install the external library. For example, to install React Icons, use the following command:
npm install react-icons
Install the library in Reunite
If you are working in Reunite, you can install the library by adding it to the package.json
file.
{ // ... "dependencies": { // existing dependencies "react-icons": "^4.11.0" } }
Follow the steps in Run a specific version in Reunite to create a package.json
file if you don't have one already.
Import and use components
After installation, you can import components directly in your React files, as in the following example:
import * as React from 'react'; import { FaHeart, FaThumbsUp } from 'react-icons/fa'; export function MyComponent() { return ( <div> <FaHeart color="red" size={24} /> <FaThumbsUp color="blue" size={24} /> </div> ); }
Usage with Markdoc
See Build markdoc tags for more information about how to register and use custom Markdoc tags.
To use external components within Markdoc, you'll need to register them in your schema, as in the following example:
// @theme/markdoc/schema.ts import type { Schema } from '@markdoc/markdoc'; export const tags: Record<string, Schema> = { // ... existing tags ... icon: { render: 'Icon', attributes: { name: { type: 'string', required: true, }, size: { type: 'number', default: 24, }, color: { type: 'string', default: 'currentColor', }, }, }, };
You also need to export your components as in the following example:
import * as React from 'react'; import { FaHeart, FaThumbsUp } from 'react-icons/fa'; export function Icon({ name, size = 24, color = 'currentColor' }) { const icons = { heart: FaHeart, thumbsUp: FaThumbsUp, }; const IconComponent = icons[name]; return <IconComponent size={size} color={color} />; }
You can use the icon component in your Markdoc files, as in the following example:
{% icon name="heart" color="red" /%} {% icon name="thumbsUp" color="blue" size=32 /%}