[RAC] - using useContextProps without ref ?

[thevipinmishra]

Hey there,

I was implementing a Check icon in the ListBoxItem component by accessing the state useContextProps, I'm not really sure if that's the ideal way but looks like ref is required to do it, which I'm not planning to add due to React 19 usage.

const ListBoxItem = (props: ListBoxItemProps) => {
  const { className, ...rest } = props;
  return (
    <ListBoxItemPrimitive
      className={composeRenderProps(className, (className, renderProps) =>
        listboxVariants().listboxItem({
          ...renderProps,
          className,
        })
      )}
      // I want to show a Check icon here alongside children if it's selected
      {...rest}
    />
  );
};

I did check the Accessing state section as well but looks like there's no ListBoxStateContext available to consume.

I hope I'm on the right path, is adding ref the only option left here for now?

Thanks.

[thevipinmishra]

I'm doing it using render props for now, but curious to know if it's the ideal way - less code and more performant?

const ListBoxItem = (props: ListBoxItemProps) => {
  const { className, children, ...rest } = props;

  return (
    <ListBoxItemPrimitive
      className={composeRenderProps(className, (className, renderProps) =>
        listboxVariants().listboxItem({
          ...renderProps,
          className,
        })
      )}
      {...rest}
    >
      {({ isSelected }) => (
        <>
          {children}
          {isSelected && <RiCheckLine className="ml-auto" />}
        </>
      )}
    </ListBoxItemPrimitive>
  );
};

[snowystinger]

You could just get the Context without using useContextProps.
Or you could use CSS to display: none/whatever based on the group + data-attribute?

We might be able to support smaller subset of the state, if I recall, there was an issue with the collection being in the state and that caused an infinite loop.