How to use react-aria-components with styled-components?

[alex2]

Hi, so far I've been using the react-aria hooks to build out functionality on top of an existing styled-components component system, but with the hooks functionality falling behind react-aria-components, particularly in terms of the collection stuff, I've just started trying out react-aria-components to see if I could switch things over, starting with Table, where it'd be great to benefit from the batteries-added features in rac.

Unfortunately I've stumbled at the first hurdle and I can't figure out what the intended path is for styled-components. I have a TR styled-component that has a selected prop taking "fill", "none", or "accent" - different visual styles for row selection. How do I compose the rac Row component with my TR component such that I can check the value of isSelected and, if true, set selected to "fill"?

The render props approach seems to only give access to these values for the component children, the className render props approach doesn't work with styled-components as far as I can tell. Is there some state hook I can use to get the various render prop parameters?

Someone raised something similar with motion here but that thread didn't go anywhere and I couldn't find anything specifically about styled-components.

[snowystinger]

I think you can use data attributes to style?
Like so https://codesandbox.io/p/sandbox/styled-components-forked-h9qmd7

See https://react-spectrum.adobe.com/react-aria/Table.html#row-1 for all the available data attributes and their values on table rows

[alex2]

That'd require going through hundreds of existing styled components in our library and adding react-spectrum-specific selectors which I'm not very keen to do when this functionality already exists nicely parameterized as props. Is there some way instead that I can use the already-supported component props, mapping react-spectrum states like isSelected to the selected prop?

[snowystinger]

Looks like styled components just doesn't want to work with any of this. I found this thread styled-components/styled-components#2342 and most relevant styled-components/styled-components#2625
Their goals are incompatible.

That said, it looks like their are some spin off projects, for example styled-components/styled-components#2625 (comment) which may bridge the gap.

There are also similar libraries to Styled Components, which you may be able to find code mods for but which support these features.

I'm not really sure what we'd do on our end to support this, see React Aria Components: rendering as custom components for more context on why that path is currently not available. The general idea was mentioned in that motion thread, but here's the full context.

[alex2]

Thanks for the context. I think given the constraints I'm working with: (1) keep the existing styled components we have, and (2) use react-aria-components, the only path forward I have is using patch-package to add an elementType prop to rac's Table, Cell, Row, Column, etc. components, at which point I pass in my existing Table, TD, TR, TH, etc. styled-components, albeit partially applied so I can apply things like selected props based on the presence of data-selected etc.

e.g.

- let ElementType = useElementType('table');
+ let ElementType = props.elementType ?? 'table';

and another to add that prop to Table in the types.d.ts then the library wrapper would look something like:

export const Table = React.forwardRef(
  (
    { rowSize, variant, ...props }: GridTableProps,
    forwardedRef: React.ForwardedRef<HTMLTableElement>
  ) => {
    const PartialTable = React.forwardRef((innerProps, innerRef) => {
      return (
        <Table
          rowSize={rowSize}
          variant={variant}
          focus={typeof innerProps["data-focus-visible"] !== "undefined"}
          {...innerProps}
          ref={innerRef}
        />
      );
    }) as typeof Table;
    return (
      <RACTable {...props} elementType={PartialTable} ref={forwardedRef} />
    );
  }
);

I've just tried it on rac's Table and Row and it's a fairly minimal patch to maintain over time 😬, or at least easier than reverse-engineering all the collection stuff and building that into a hooks-only implementation. Hopefully in future you can add similar support and I can scrap the patch, but I do appreciate that the styled-components user-base is an ever-diminishing group.