Otherwise, even if it works initially (Unlike the case of YouTube), these could get blocked without your knowledge using X-Frame-Options. And I hope it’s clear that adding any URL into an Iframe doesn’t work with React or any other frontend library or framework unless the embedding site allows your web app domain to embed it.

1. Framer X React Example
2. Framer X React Hooks

React-style state machine for Framer Managing simple state in Framer prototypes is pretty straightforward. Let’s say we’ve got a counter, a message that tells you the state of the counter, and a button that increments the counter. Simple: just set the initial value of the counter variable, set up the. Why does React seem so hard? I’ve noticed that designers with experience building interfaces in jQuery, ActionScript, or (ironically) Framer Classic tend to struggle with React. This has little to do with React and everything do to with programming models. The examples mentioned above use an imperative model, while React. Framer Motion is an open-source motion library, which drives Framer X’s animations and gesture capabilities in React.js projects. If you are familiar with Popmotion, Framer Motion is the successor to the popular Pose animation library.

Components are reusable building blocks to be used within and across your projects.

Framer knows two types of components:

1. Components created on the canvas
2. Code components

Components created on the canvas

After designing your UI element using Frames, you can turn it into a reusable component by selecting your element and creating a component out of the selection in one of two ways:

1. Clicking the Component button in the top toolbar
2. Press ⌘ + K for Mac or Ctrl + K for Windows

Once a component has been created from your selected Frame, we are figuratively ‘entering’ the component’s inner workings by entering Component Canvas. This is where we can make your components smart with interactive Variants and custom property Variables.

Primary to instance relationship

Within the Component Canvas, your component will be turned into the Primary layer.

Like many other design tools, Framer uses a primary and Instance pattern to manage elements of a design that must be repeated in many places. In this pattern, a primary defines a template that the instances inherit. In this way, a designer can update every instance just by changing the primary.

Say we created a card with a border-radius of 20px. If this card is turned into a component and we used an instance of it many times throughout our project, a change to the border radius will be as simple as entering the Component Canvas of our component and changing it in the Primary layer.

If we explicitly do want a different border-radius for one of our instances, we can of course change it in the instance (after having created a Variable for it) and any future changes to the exact border-radius prop of the Primary now won’t affect this instance.

Using instances of your component

To reuse your component, you can add instances of it to anywhere within your prototype. An instance can be created in the following ways:

• Dragging it from the bottom-left Components panel
• Under Project Components in the Insert Menu
• Duplicating/copy-pasting another instance on the canvas

Detaching an Instance

To remove the relationship between an Instance and a Primary, right click the Instance and click Detach Instance. This will turn the Instance into a regular Frame.

Making your component interactive with Variants

Within the Component Canvas, we can make our static component become fully interactive using Variants.

Variants are different states your component can animate to, either temporarily with Hover and Pressed states or persistent with a new Variant.

Adding customizable properties using Variables

Framer X React Example

Components by nature are reused throughout your prototype, but do not always look exactly the same. For a card, you may want text layers within the card be customizable.

To allow you and others to customize instances, Variables can be assigned to properties that should become flexible for any changes.

Code components

Framer X React Hooks

Components can also be written with (existing) React code. To create a code component, you first need to ensure code is enabled.

The Framer API can also be used to complement your code components, enabling advanced features such as property controls and allowing you to use Framer’s built-in tools such as the Page or Scroll right within your code component.

Using code components within your project also enable you to re-use existing production React components, for instance from a React design system and to distribute them as (Team) Packages.