Changelog

March 13, 2026

Renaming exported custom attributes

Similar to how it renames exported components and props, DevLink now renames or filters out exported custom attributes to ensure that the exported React code is valid.

  • HTML5 standard names such as tabindex and maxlength are capitalized according to React standards, in this example tabIndex and maxLength
  • Attributes that have a React equivalent, such as class and for, are converted to the React equivalent, in this example className and htmlFor
  • Attributes that match event handler names such as onClick and onMouseOver are filtered out, regardless of case
  • Attributes that start with numbers are filtered out
  • Attributes that are incomplete, such as data- and aria- are filtered out
  • Attributes named with an empty string are filtered out
  • Attributes containing invalid characters, such as my-😀-attr, are filtered out
  • Any other invalid HTML5 attributes are filtered out

DevLink prints a warning to your CLI console, and adds JSDoc Invalid Attribute comments, when it filters out attributes due to these rules, except when removing attributes with an empty string as their name. For example, this exported code shows a warning about a custom attribute that was filtered out:

1/**
2 * ComponentWithInvalidAttributes
3 *
4 * @warning
5 * The component could not be fully exported:
6 * - Invalid attribute: \`onClick\`
7 */
8export function ComponentWithInvalidAttributes() {
9  return <Builtin.Block tag="div" data-testid="my-block" aria-label="My Block" />;
10}

For more information, see What DevLink Exports.