filterAttrs Helper

latest

We've standardized allowing our users to pass data attributes within arc components.

we've done this using a helper function called filterAttrs

import React from "react";

import { filterAttrs } from "@arc-ui/helpers/filter-attrs";

/**
 * Use `Text` to display text.
 */
export const Text = ({id, children, ...props}: TextProps) => {
  return (
    <span
      id={id}
      {...filterAttrs(props)}
    >
      {children}
    </span>
  );
};

Exemptions

Where radix primitives have been built upon, we have not filtered the props in order to allow the correct use of the asChild prop. When asChild is set to true, Radix will not render a default DOM element, instead cloning the part's child and passing it the props and behavior required to make it functional. The filterAttrs helper would filter out these attributes required for correct functionality.

The following components/subcomponents do not use the filterAttrs helper:

ButtonV2
MenuTrigger
Tooltip
SplitButtonPrimary
SplitButtonMenu

Exemptions​

Exemptions