RichText attribute and style normalization

The RichText component performs automatic normalization of HTML attributes and CSS properties to ensure compatibility with React. When rendering rich text content from Optimizely CMS, the component converts CMS-authored markup into valid React props and styles, preventing runtime warnings and ensuring consistent rendering.

📘

Note

This processing happens automatically. No additional configuration is required when rendering CMS-authored rich text.

Attribute normalization explained

React enforces camelCase prop names and structured style objects, while HTML content authored in the CMS typically uses kebab-case attributes and inline CSS. The RichText component resolves these differences during rendering.

📘

Note

Without normalization, React would emit warnings for invalid DOM attributes and ignore unsupported properties.

HTML attribute conversion

The component normalizes HTML attributes to their React-compatible equivalents using an internal mapping table.

Reserved Keywords

These attributes must always be mapped to avoid conflicts with JavaScript or React internals:

Table Attributes

Form and input attributes

The following attributes are normalized automatically:

• tabindex, tab-index –> tabIndex
• readonly –> readOnly
• maxlength –> maxLength
• minlength –> minLength
• autocomplete –> autoComplete
• autofocus –> autoFocus
• autoplay –> autoPlay
• contenteditable, content-editable –> contentEditable
• spellcheck –> spellCheck
• novalidate –> noValidate

Media attributes

• crossorigin –> crossOrigin
• usemap –> useMap
• allowfullscreen –> allowFullScreen
• frameborder –> frameBorder
• playsinline –> playsInline
• srcset –> srcSet
• srcdoc –> srcDoc
• srclang –> srcLang

Meta and form attributes

• accept-charset –> acceptCharset
• http-equiv –> httpEquiv
• charset –> charSet
• datetime –> dateTime
• hreflang –> hrefLang
• accesskey –> accessKey
• autocapitalize –> autoCapitalize
• referrerpolicy –> referrerPolicy
• formaction –> formAction
• formenctype –> formEnctype
• formmethod –> formMethod
• formnovalidate –> formNoValidate
• formtarget –> formTarget
• enctype –> encType.

Attributes preserved without conversion

Many HTML attributes are already valid React props and are passed through without modification.

Examples include:

• Basic – id, name, value, type, href, src, alt, title.
• Form – disabled, checked, selected, multiple, required, placeholder.
• Interactive – hidden, draggable, lang, dir, role.
• Media – width, height, controls, loop, muted.
• Security – nonce, sandbox, download.

📘

Note

Skipping unnecessary conversions improves rendering performance.

Special attribute handling

ARIA attributes

All ARIA attributes are preserved in kebab-case, as required by React.

Examples:

• aria-label.
• aria-labelledby.
• aria-describedby.
• aria-hidden.
• aria-expanded.

Data attributes

All data-* attributes are preserved as-is and passed directly to the rendered element.

CSS property normalization

Inline CSS properties authored in the CMS are automatically moved into React’s style object.

• Kebab-case property names are converted to camelCase.
• Properties are grouped under a single style prop.
• Invalid DOM property warnings are avoided.

📘

Note

For example, background-color becomes style.backgroundColor.

Supported CSS property categories

The component recognizes and normalizes a curated set of commonly used CSS properties, including:

Layout and Sizing

• min-width, max-width.
• min-height, max-height.

Spacing

• margin, padding (including directional variants).

Typography

• font-family, font-size, font-weight.
• line-height, letter-spacing.
• text-align, text-transform, text-decoration.

Colors and Backgrounds

• color.
• background-color, background-image, background-size.

Borders

• border, border-radius.
• Directional border variants.

Positioning and Display

• position, top, right, bottom, left.
• display, visibility, opacity.
• overflow, z-index.

Flexbox and Grid

• flex, justify-content, align-items.
• grid-template-columns, gap, row-gap.

Effects and Animation

• box-shadow, filter, transform.
• transition, animation.

Interaction and Modern CSS

• cursor, pointer-events, user-select.
• aspect-ratio, object-fit.
• scroll-behavior, scroll-snap-type.

End result

After processing:

• All attributes comply with React DOM requirements.
• Inline styles render correctly without warnings.
• Accessible Rich Internet Applications (ARIA) and data attributes remain intact.
• Content authored in the CMS renders safely and predictably in React.