Setting the file. One moment.
Subchapter 2.68
references/editor-react-component/REACT-PATTERNS.mdMarkdown2 KBView on GitHub
Code patterns and common mistakes for Editor React components.
Avoid browser-only APIs at module scope or during render; use them inside useEffect with typeof window !== 'undefined'.
❌ Wrong:
const userAgent = window.navigator.userAgent;✅ Correct:
useEffect(() => {
if (typeof window !== "undefined") {
const userAgent = window.navigator.userAgent;
}
}, []);See PROPS-VS-CSS.md — element visibility is platform-managed; always render all elements, no conditional rendering.
Authoritative SCSS rules: REACT-GUIDELINES.md Part 2. For RTL/logical CSS patterns, see DIRECTIONALITY.md.
// ❌ NEVER include:
// Transitions/Animations
transition: all 0.3s; // ❌
animation: fadeIn 0.5s; // ❌Design states (
hover,focus,selected, …) are authored perDESIGN-STATES.md.
For a custom design state, toggle the element’s global state class from
its data in JSX (e.g. isSelected && 'pricing-card-row--selected', using the
component-name-prefixed class) — don’t express it as a module-scoped class. State styling lives in DESIGN-STATES.md.
❌ Wrong:
const isMobile = window.innerWidth < 768; // ❌ SSR breaks✅ Correct:
useEffect(() => {
if (typeof window !== "undefined") {
setIsMobile(window.innerWidth < 768);
}
}, []);For lists, breadcrumbs, tabs, menus, and similar collection-style UI, render the underlying semantic HTML directly (<ol>/<ul> + <li>, <nav>, <button role="tab">, etc.) and own the keyboard / ARIA wiring in your own React code.
<ol className="breadcrumbs">
<li>
<a href="/">Home</a>
</li>
<li>
<span aria-hidden="true">/</span>
<a href="/products">Products</a>
</li>
</ol>Handle separators with CSS pseudo-elements or inside each item.