Developers
Back to framer.com
Documentation
Smart-components
  • Motion
  • Handshake
  • Guides
  • API Documentation
Developers
  • Motion
  • Handshake
  • Guides
  • API Documentation
Back to framer.com
Guides
  • Code Components
  • Smart Components
  • Code Overrides
  • Auto Sizing
  • Sharing Code
  • Importing External Code
  • Migrating
  • HandshakeBeta
Community
  • GitHub
  • Discord

Smart Components

Add extra functionality to your Smart Components through code.

#Importing Smart Components into Code

Any Smart Component in Framer can be imported into Code and used as a normal React component. To import a component, open the Import Menu in the toolbar and find a smart component from your project or Team Library.

Once imported, all variables on the Smart Component can be overridden as properties on the component, allowing you to control and adapt your smart components in code.

import { motion } from "framer-motion"
import YourSmartComponent from "../canvasComponent/JQ9GA2_s0"
export default function List(props) {
const { count, style } = props
const friends = [0, 1, 2, 3, 4, 5]
return (
<motion.div style={{ ...style }}>
{friends.map((friend) => (
<YourSmartComponent color="pink"/>
))}
</motion.div>
)
}

Since Smart Components are React components under-the-hood, they'll appear pixel perfect in your components and can be controlled with normal React workflows.

Here is an example that gets you started controlling a smart components variants inside a Code Components. In this case the Code Component logs the state of the toggle on tap.

import { useState, useEffect } from "react"
import { motion } from "framer-motion"
import Toggle from "../canvasComponent/JQ9GA2_s0"
export default function List(props) {
const [toggled, setToggled] = useState(false)
const handleToggle = () => setToggled(!toggled)
useEffect(() => {
console.log(`Toggle State: ${toggled ? "On" : "Off"}`)
}, [toggled])
return (
<Toggle variant={toggled ? "On" : "Off"} onTap={handleToggle} />
)
}

#Code Components in Smart Components

The best way to think about working with Smart Components is that they provide you with a way to change the props of the component. When a smart component changes its variant, it is changing the props of all the Components within it. You can use this to enable all sorts of interactions without code.

If you have a Smart Component with a Code Component inside, you can have multiple variants to do all sorts of things. Here's a template for a component that will animate color change when the tint property is changed.

import { motion, addPropertyControls, ControlType } from "framer"
export function Code(props) {
const { tint, onTap } = props
return (
<motion.div
initial={false}
animate={{ backgroundColor: tint }}
style={{ width: "100%", height: "100%" }}
/>
)
}
Code.defaultProps = {
height: 200,
width: 200,
tint: "#09F",
}
addPropertyControls(Code, {
tint: {
title: "Tint",
type: ControlType.Color,
},
onTap: {
type: ControlType.EventHandler,
},
})
PreviousCode ComponentsNextCode Overrides
On this page
  • Importing Smart Components into Code
  • Code Components in Smart Components

Copyright © 2022 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement