React Aria Components. Passing in state to Stylex

[BMCwebdev]

-Edit- Hi Naman, if you get to this one feel free to jump down to this comment That where I was hoping to get your feedback. Thank you very much!

---

I was working on the last thing (ha! My to-do lists never end!) on my to-do list:

Figure a way to get the React Aria Component render props into the Stylex spread function.

• React Aria Components Render Props
• React Aria Components Button Styling
• Stylex using styles
• Stylex discussion about helper function possible answer

If you search for "The states, selectors, and render props" on this page you will see a list of the states I have been trying to access. It also lists the data-attributes you can use. However, relying on the data-attributes is not as reliable, and kinda makes Stylex style objects messy and complicated. Much better to be able to use style objects conditionally.

Additionally in the same link you can see all the props you can access for styling. Props we can access easily, but the states, selectors, and render props has been the issue.

What I discovered as a solution is to use React Aria's hooks for the state. For example:
import {useFocusVisible} from 'react-aria';
and
const { isFocusVisible } = useFocusVisible();
And now you can use isFocusVisible in your Stylex spread function.

<RACButton
  {...props}
  {...stylex.props(
    buttonStyle.base,
    variantStyles,
    isFocusVisible && styleXFocusRing.base,
    props.isDisabled && disabled.base,
  )}
/>

It is a bit of a shame that RAC Button component is already using useFocusVisible, among others, but does not expose it. So it feels like repeating work. They do have some functions in their utils file that help with making this easier when you just use classname. For example:

<Button
  className={({ isFocusVisible }) => isFocusVisible ? 'gray-700' : 'gray-600'}
/>

It would be nice to have a similar reusable function so that you wouldn't have to do the above work for every component. I have started a discussion over in their GitHub.

[BMCwebdev]

For those following along, useFocusVisible is actually just a global bool that tells if focus is being achieved via input like a keyboard. Not what you want to use here. Instead...
import { useFocusRing } from 'react-aria';
deconstruct like so
const { isFocusVisible, focusProps } = useFocusRing();
And then spread into component (as any unfortunately) like so:

    <RACButton
      {...props}
      {...(focusProps as any)}
      {...stylex.props(
        buttonStyle.base,
        variantStyles,
        isFocusVisible && styleXFocusRing.base,
        props.isDisabled && disabled.base,
      )}
    />

So this is working. Would like a solution that works as well as classname does out of the box, we will see if they want to work on it. Updated my repo but have no rebuilt the package related to it. Calling it a night.

[BMCwebdev]

I take that back, now I'm calling it a night. Here is the new method.
Import ButtonRenderProps from react-aria-components
Then, in the component use classname and pass in Stylex there, and take the classname string or style object from that. RAC is set up to work with classname
className={({ isFocusVisible }) => isFocusVisible ? 'gray-700' : 'gray-600'}
But we can use it like this

    <RACButton
      {...props}
      className={(renderProps: ButtonRenderProps) => stylex.props(
        buttonStyle.base,
        variantStyles,
        renderProps.isFocusVisible && styleXFocusRing.base,
        props.isDisabled && disabled.base,
      ).className || ''}
      style={(renderProps: ButtonRenderProps) => stylex.props(
        buttonStyle.base,
        variantStyles,
        renderProps.isFocusVisible && styleXFocusRing.base,
        props.isDisabled && disabled.base,
      ).style || {}}
    />

This is working so far. Would love to know if anyone think there could be bad side effects by not spreading in the stylex.props function, and using it this way in general. @nmn hope you don't mind me pinging you to get your opinion. Thank you!

[nmn]

FWIW: If you're not using any dynamic styles (functions), you can skip the style prop entirely.

<RACButton
  {...props}
  className={(renderProps: ButtonRenderProps) => stylex.props(
    buttonStyle.base,
    variantStyles,
    renderProps.isFocusVisible && styleXFocusRing.base,
    props.isDisabled && disabled.base,
  ).className ?? ''}
/>

Would work.

[BMCwebdev]

Awesome! Thank you!