Framer Controller Docs

Built with

FetchController

A FetchController fetches data from a URL and stores it in its data property.

Option	Type	DefaultValue	Description
url	string		The URL to fetch data from.
init	object	{}	Optional - A fetch RequestInit object containing any custom settings to apply to the request.
parse	function	(data) => data	Optional - A function that accepts the raw fetched data and returns the data to store as `data`.
log	boolean	false	Optional - When `true`, the controller will log its `data` on each change.
data	any	false	Optional - An initial value for the controller's `data` property.

Property	Type	Description
url	string	The controller's current URL for data fetching. Changing this property will load new data from the new URL.
data	any	The controller's data, stored from its last fetch request.
loading	boolean	Whether the controller is waiting for new data.

Method	Description
refresh()	Load new data from the current URL.

Example:

xxxxxxxxxx
 
import { Override } from "framer"
import { FetchController } from "framer-controller"
​
const controller = new FetchController({
    url: "https://randomuser.me/api/",
    init: {
        mode: "no-cors",
    },
    parse: data => data.results[0],
})
​
export const ImageContainer: Override = () => ({
    background: controller.data && `url(${controller.data.picture.large})`,
})
​
export const FetchButton: Override = () => ({
    onClick: controller.refresh,
})