Guides
Community

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