Posts tagged #react

📝 ✨ ~ Framer Code Override Not Showing? Add ComponentType

Thu, 18 Dec 2025 00:00:00 GMT

I've seen this question pop up in the Framer community more than a few times: "I wrote a code override, but it's not showing up in the dropdown!" 😤

It's frustrating because the code looks right, it's in the right place, but Framer just... ignores it. Something I also personally experienced when creating my first Outseta code overrides.

The Problem

Here's what usually happens. You write what feels like a perfectly reasonable code override:

// ❌ This won't show up in the override panel
import { forwardRef } from "react";

export const WithClick = (Component) => {
  return forwardRef((props, ref) => {
    const handleClick = () => {
      console.log("Clicked!");
    };

    return <Component {...props} ref={ref} onClick={handleClick} />;
  });
};

You save the file, go back to the Framer canvas, and... nothing. The override doesn't appear in the dropdown. No error message, no explanation. It's like your code doesn't even exist.

The Solution

Framer has specific requirements for code overrides to show up in the panel. It's not just about writing a function - the function needs to follow a particular signature that Framer recognizes.

Specifically, code overrides must be properly typed with React's ComponentType as the return type.

// ✅ This will show up in the override panel
import { forwardRef, ComponentType } from "react";

export const WithClick = (Component): ComponentType => {
  return forwardRef((props, ref) => {
    const handleClick = () => {
      console.log("Clicked!");
    };

    return <Component {...props} ref={ref} onClick={handleClick} />;
  });
};

That's it. The ComponentType return type annotation is what tells Framer "hey, this is a valid override!" Without it, Framer has no way to know your function is meant to be an override.

This isn't really explained in the error messages (because there are no error messages 🤦‍♀️), and it's not super obvious from the docs either. But once you know it, it makes sense and now you know 🥳

📝 ✨ ~ Copy current URL with a Framer Code Override

Mon, 27 Oct 2025 00:00:00 GMT

I've been browsing the Framer community forum lately as I'm working on an updated Outseta Framer Plugin.

There I found a question about how to add a "copy link" code override and threw together a code override.

What are Code Overrides?

Code overrides are Higher Order React Components that wrap around "stuff" on the Framer canvas. So if you are a React developer, you can use code overrides to add all sorts of functionality to a Framer site.

Framer is really onto something here with seperating design from functionality 🤩

The Ask

Copy the current page URL to the clipboard with a Code Override.

The Solution

A lightweight Code Override that adds copy-to-clipboard functionality to any element.

The Code

import { forwardRef, type ComponentType } from "react";

export function withCopyURL(Component): ComponentType {
  return forwardRef((props, ref) => {
    const handleClick = async () => {
      try {
        const currentURL = window.location.href;
        await navigator.clipboard.writeText(currentURL);
        console.log("URL copied to clipboard:", currentURL);
      } catch (err) {
        console.error("Failed to copy URL:", err);
      }
    };

    return <Component ref={ref} {...props} onClick={handleClick} style={{ cursor: "pointer" }} />;
  });
}

How to Use It

In Framer, open the Assets panel and go to the Code tab
Click the + button to create a new Code Override file and name it
Paste the code above into the file
Select any element on your canvas (a button, icon, or text layer)
In the properties panel, find Code Override and select withCopyURL

That's it! Now when someone clicks that element, the current page URL gets copied to their clipboard.

You can add visual feedback like hover states or tap animation in the Framer canvas.

Going Further

You could extend this Code Override to:

Show a toast notification after copying ("Link copied!")
Copy a custom URL instead of the current one (great for referral links)
Track copy events in your analytics

PS: The Clipboard API works in all modern browsers, but it requires a secure context (HTTPS). It'll work fine on your published Framer site, but might act up on localhost without HTTPS.

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ Kind of annoyed at React

Thu, 18 Jan 2024 00:00:00 GMT

Last week, Cassidy Williams wrote Kind of annoyed at React, and I wholeheartedly agree with her train of thought.

In it, she mentioned that the latest React release was in June 2022 🤯

That made me peek at the release note again, reminding me that React Server Components (RSC) are still experimental.

And together with experiences like:

Every time a new developer picked up our codebase, the questions came up: “What’s running on the server? What’s running on the client?” Every PR had feedback regarding something accidentally/unnecessarily shipped to the client.

mentioned in Everything I Wish I Knew before moving 50,000 lines of code to React Server Components it makes me cautious, very cautious.

But it's always a good idea to try to understand a concept, and for that, I recommend Josh Comeau's post Making Sense of React Server Components.

🤔

📝 ✨ ~ How to style `dangerouslySetInnerHTML` with Tailwind

Wed, 22 Mar 2023 00:00:00 GMT

I stumbled on this challenge when working with highlighting for Prune your Follows.

How to style the mark element in the possibly highlighted search result?

Turns out Tailwind has support for Using arbitrary variants, but it took me quite a while to find that in the documentation, I'll tell you 🕵️‍♀️

const HighlighetResult = () => {
  return (
    <span
      className="[&>em]:bg-amber-300" // 👈👈👈
      dangerouslySetInnerHTML={{
        __html: highlight?.username || record.username,
      }}
    />
  );
};

Inside the [] in the code example, you may use any regular old css selector! So, for instance, if you are getting content from a third party, you could do [&>p], [&>img] etc. The > indicates direct descendant; for any img you'll need to do [&_img], the _` will be read as a space.

All the best,
Queen Raae

📝 ✨ ~ Styling broken images (with Tailwind and React)

Sat, 26 Nov 2022 00:00:00 GMT

After using pruneyourfollows.com for a couple of weeks, I started seeing broken image avatars. The app does not import data for unfollowed accounts; at some point, the imported image avatars break, and it look like this:

Shai Schechter to the rescue! He climbed onboard for Friday's unauthorized and rum-fueled treasure hunt in the sharky waters around the Gatsby islands to help us out.

He proposed listing for the image's load and error events to determine its status. It also meant we could add a nice pulsating style while loading.

import clsx from "clsx";
import React, { useState } from "react";

export function Avatar({ imageUrl, altText, className }) {
  const [status, setStatus] = useState("loading");

  const handleOnLoad = () => {
    setStatus("fulfilled");
  };

  const handleOnError = () => {
    setStatus("failed");
  };

  return (
    <div
      className={clsx(
        "overflow-hidden rounded-full border bg-slate-400",
        status === "loading" ? "animate-pulse" : "",
        className
      )}
    >
      <img
        className={clsx(
          status === "fulfilled" ? "visible" : "hidden",
          "w-full"
        )}
        src={imageUrl}
        alt={altText}
        onLoad={handleOnLoad}
        onError={handleOnError}
      />
    </div>
  );
}

Full disclosure: I set it up as status === "failed" ? "hidden" : "visible" (flipped logic) to begin with, but that resulted in a flicker of a broken image and, to be honest, hiding until success makes much more sense!

All the best,
Queen Raae

🧙‍♀️ 🧱 ~ A little semantic HTML trick for React components

Mon, 10 Oct 2022 00:00:00 GMT

Learn more about 24 Semantic HTML Elements this advent by signing up for Semantic Advent that will run again in 2024.

</aside>

Semantic HTML is the foundation of a web project. It helps assistive technologies and Google make sense of your site.

What is semantic HTML? article, heading, h2, aside, ul, section etc. all have semantic meaning. It says something about the content inside them. If the content is a stand-alone piece of content, use article; if it's a list, use ul, and so on. In comparison, div and span have no semantic meaning.

To lean more about check out web.dev's article on Semantic HTML.

Unfortunately, adherence to semantic HTML often gets lost when creating reusable React UI components.

Let's say we make a reusable card component.

It could look something like this:

// File: card.js
import React from "react";

export function Card(props) {
  const { children } = props;
  return <div>{children}</div>;
}

It makes sense not to give the design of the content (a card) any semantic meaning by using a div. However, such a component is very often used semantically.

As a list of blog posts => article
As a call out in an article => aside
To spice up the design of a paragraph => p

We can solve the issue by surrounding the card with the correct semantic element:

// File: exmaple.js
import React from "react";
import { Card } from "./card";

export function Example() {
  return (
    <article>
      <p>An introduction</p>
      <aside>
        <Card>
          Something related to the article but a little outside of the normal
          flow.
        </Card>
      </aside>
      <p>More content...</p>
      <p>
        <Card>A paragraph with different styling...</Card>
      </p>
      <p>More content...</p>
    </article>
  );
}

But we'll be notified that a div is not a valid child of p, and the approach feels iffy. At least to me 🤪

The semantic HTML trick for React components!

There was an error earlier in the example code caught by GasimGasimzada on Reddit Thank you!
as is a better prop name than element, as suggested by several commentators on Reddit.

</aside>

Make the semantic HTML element configurable:

// File: card.js
import React from "react";

export function Card(props) {
  // 1️⃣ Destructure element and children from props
  const { element, children } = props;

  // 2️⃣ Capitalise element to make it valid jsx
  let Element = element;

  // 3️⃣ Make "div" the default choice
  if (!element) {
    Element = "div";
  }

  return <Element>{children}</Element>;
}

Or in shorthand form:

import React from "react";

export function Card(props) {
  // Do 1️⃣, 2️⃣, 3️⃣ in one line
  const { element: Element = "div", children } = props;

  return <Element>{children}</Element>;
}

You may then use the Card component like so:

// File: exmaple.js
import React from "react";
import { Card } from "./card";

export function Example() {
  return (
    <article>
      <p>An introduction</p>

      <Card element="aside">
        Something related to the article but a little outside of the normal
        flow.
      </Card>

      <p>More content...</p>

      <Card element="p">A paragraph with different styling...</Card>

      <p>More content...</p>
    </article>
  );
}

Credit where credit is due. I learned how to do this by looking at MUI's source code!

All the best,
Queen Raae

Posts tagged #react

📝 ✨ ~ Framer Code Override Not Showing? Add ComponentType

The Problem

The Solution

📝 ✨ ~ Copy current URL with a Framer Code Override

What are Code Overrides?

The Ask

The Solution

The Code

How to Use It

Going Further

📝 ✨ ~ Kind of annoyed at React​

📝 ✨ ~ How to style `dangerouslySetInnerHTML` with Tailwind

📝 ✨ ~ Styling broken images (with Tailwind and React)

🧙‍♀️ 🧱 ~ A little semantic HTML trick for React components

The semantic HTML trick for React components!

📝 ✨ ~ Kind of annoyed at React