Importing Package Components in code
Sometimes you may want to use a code component from a package within your own code component. You can do this by importing the component into your code file within the editor in the following way:
import { Arconic } from "@framer/benjamin.arconic/code/Arc"
Finding the import path
First we need to find out through which path we can find the package’s component:
- Install the package you want to use.
- Open your project folder by clicking
File
>Show Project Folder
or use⌥
⌘
P
. - Open the
node_modules
>@framer
folder where all packages will be installed. - In the
code
folder, you will find each code component that the creator has added to the package.
In our example, we arrive at the path @framer/benjamin.arconic/code/Arc
Finding the name of the component to import
Through this we can figure out what to import
:
- Within the folder where we left off, open the component
.tsx
file. You can use any code editor to open this file, but we recommend Visual Studio Code. - Find the name of the component to be used, which is usually preceded by
export function
orexport class
.
Make sure that the component you import is really the component name, not the file name. In our example this is Arconic
.
Example
You can now wrap the component within your code override or code component. To render the component within your own code component, you can refer to the imported component by enclosing the name in opening and closing tags.
import { Arconic } from "@framer/benjamin.arconic/code/Arc";export function ArconicImport() { return ( <Arconic /> )}
However, the component will likely not render how we’d expect it to. This is because the component should know with what properties to start.
If we open the original component .tsx
file, we can hover over the component name Arconic
to find it’s properties. Most of these properties are set by default within the file, for instance under defaultProps
. If we pass these properties along to the component it will render as expected.
import { Arconic } from "@framer/benjamin.arconic/code/Arc"; export function ArconicImport() { return ( <Arconic width={200} height={200} length={360} strokeWidth={60} lineCap={true} color="#0EF" colorEnd="#60F" angle={180} /> )}
Non-Framer packages
You can also use and install packages that are not published to Framer. Consult the article on importing existing React components or the article on using NPM packages to learn more.
In his video tutorial, we guide you through installing packages from NPM with Yarn: