How do I access state from deeply nested components?

[crisshaker]

Is there a way to access the value of say useRadioState() from a component that is deeply nested inside a RadioGroup?

The obvious ways are to prop-drill the value or write my own Provider. What I'm looking for (if it's possible) is something like a useRadioGroup hook that already exists in ariakit and does exactly that. Example usage, please 🙃

[diegohaz]

useRadioGroup is just a custom hook that returns HTML props so you can create your own RadioGroup component. It doesn't give you access to the radio state.

The obvious ways are to prop-drill the value or write my own Provider.

That's the way. You can also try constate if you're doing that very often:

import { useRadioState, RadioGroup, Radio } from "ariakit";
import constate from "constate";

const [RadioProvider, useRadioContext] = constate(useRadioState);

function Wrapper() {
  // can't useRadioContext here
  return (
    <RadioProvider defaultValue="orange">
      <MyRadioGroup />
    </RadioProvider>
  );
}

function MyRadioGroup() {
  const state = useRadioContext();
  return (
    <RadioGroup state={state}>
      <RadioList />
    </RadioGroup>
  );
}

function RadioList() {
  const state = useRadioContext();
  console.log(state.value);
  return (
    <>
      <Radio value="apple" />
      <Radio value="orange" />
      <Radio value="watermelon" />
    </>
  );
}

[crisshaker]

This looks great! Definitely going to add constate to my toolbox.

constate wouldn't work for my current use case though.
I'm doing this:

const reasonRadio = useRadioState({
  setActiveId(id) {
    reasonRadio.setValue(id);
  }
});

This can't be achieved using the RadioProvider returned by constate. But yeah, constate looks good. Thanks!