search

koenbok / Framer

Framer - Design Everything
https://framer.com
MIT License
5.83k stars 477 forks source link

Ability to render Frame as anything other than <div> #592

Open andria-dev opened 3 years ago

andria-dev commented 3 years ago

With the Framer API, it appears that there isn't a way to render something like <header>, <figure>, or any other semantic HTML elements with <Frame> — this is likely not limited to just <Frame>. This means that using the Framer API on the web is very limited; to maintain accessibility on a website you would not be able to use <Frame> in specific parts of the code.

Here is an example that is taken straight from the "Examples" section of the documentation:

<Frame size={150} background={"#fff"} radius={30} />

The above code would render a <div> in HTML like so:

<div
  data-framer-component-type="Frame"
  size="150"
  style="display: block; flex-shrink: 0; user-select: none; pointer-events: none; height: 150px; width: 150px; border-radius: 30px; background: rgb(255, 255, 255); transform: none;"
>
</div>

Solution

What I'm proposing is that — to allow semantic HTML elements to be used, a necessity for accessibility on the web — an as prop would be added for any component that can currently only render a <div>; the as prop has become quite commonplace in the React community.

<Frame as="header" size={150} background={"#fff"} radius={30} />
<Frame as="section" size={150} background={"#fff"} radius={30} />
<Frame as="figure" size={150} background={"#fff"} radius={30} />
<Frame as={WhateverComponentOrHtmlTagYouWant} size={150} background={"#fff"} radius={30} />