react-web-components

name	react-web-components
description	Guides React integration with web components, including fig-* and propskit-* elements. Use whenever creating, editing, reviewing, or debugging JSX that contains custom elements or web-component APIs.

React Web Components

Project rule

any web component, such as fig-* or propskit-* cannot use className terminology in react. it needs class attribute.

• Use class on every custom element whose tag contains a hyphen.
• Continue using className on native HTML elements and React components.
• Preserve the web component's documented attribute names, including hyphenated names such as aspect-ratio and fig-menu-trigger.

<fig-button class="toolbar-button" variant="ghost" icon="true">
  <fig-icon name="more" />
</fig-button>

<div className="toolbar">...</div>

React integration

• This project uses React 18. For non-string object or function properties, assign the property through a ref in an effect unless the component API explicitly supports an attribute.
• JSX handlers are appropriate for standard DOM events such as click. Subscribe to web-component custom events with addEventListener on a ref and remove the listener during effect cleanup.
• Treat presence-based boolean attributes carefully. When false should remove the attribute, use condition ? "" : undefined unless the component documents another format.
• Before finishing a JSX edit, check all fig-*, propskit-*, and other hyphenated tags for accidental className usage.