Importing Package Components in code

Note: This article uses Framer’s code features. Find out how to enable code features in your project.

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:

1. Install the package you want to use.
2. Open your project folder by clicking File > Show Project Folder or use ⌥ ⌘ P.
3. Open the node_modules > @framer folder where all packages will be installed.
4. 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:

1. 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.
2. Find the name of the component to be used, which is usually preceded by export function or export 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, Design Educator Steve Ruiz also guides you through installing packages from NPM with Yarn: