Utilizing useComponentContext hooks for custom components

[matt-kanovsky]

I was looking to make a custom value component for the Select component. Naturally, I stumbled upon the useSelectContext hook, which is exactly what I needed to get this working. A simple example I cooked up looks like this (to be used within a Select):

const CustomValue = () => {
  const selectContext = useSelectContext();

  const numSelected = selectContext.selectedItems.length;

  if (numSelected === 0) {
    return 'Select some items...';
  }
  if (numSelected === selectContext.collection.size) {
    return 'All selected';
  }
  return `${numSelected} selected`;
};

My question: is this okay to do?? Obviously, it works, but I don't see this pattern documented anywhere and I wanna make sure I'm not using library functionality exposed by accident !!

[segunadebayo]

It’s absolutely okay to do that.

We need to update this page https://ark-ui.com/docs/guides/component-state to include the context hook.