Expose RadioGroupContext via useRadioGroup Hook

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Expose RadioGroupContext via useRadioGroup Hook (cf. useFormControl).

Examples 🌈

https://codesandbox.io/s/material-demo-9w4yc

Motivation 🔦

I’d like the ability to easily work out whether a wrapped Radio is checked, so I can apply custom styling to a checked label, for example (see demo above). In MUI v3, this was possible because RadioGroup would use cloneElement and pass checked prop to children. With the new context implementation (https://github.com/mui-org/material-ui/pull/15069), I now need to hook into the context but because it’s not part of public API, I’d need to use a Babel transform to import the correct module (CJS vs ESM) in my library output:

• @material-ui/core/RadioGroup/RadioGroupContext
• @material-ui/core/esm/RadioGroup/RadioGroupContext

@oliviertassinari has pointed out that we’re currently exposing FormControlContext via a custom useFormControl Hook, so we could probably do the same in this instance? I’m happy to raise a PR for this.

Prior art: https://github.com/mui-org/material-ui/issues/11865

[NMinhNguyen]

• To export useRadioGroup in the barrel index (js and ts).

FYI it already is exported via https://github.com/mui-org/material-ui/blob/5aad5f2f729066534bd9d408cc8518b51a9f0f14/packages/material-ui/src/RadioGroup/index.js#L2 and https://github.com/mui-org/material-ui/blob/5aad5f2f729066534bd9d408cc8518b51a9f0f14/packages/material-ui/src/index.js#L239

so we just need a documentation change.

[eps1lon]

While this specific customization is doable without using RadioGroupContext I think we can allow this.

Oh, how would you do it instead?

Manually do the checked test and pass it to MyFormControlLabel: https://codesandbox.io/s/material-demo-6dbb3. It’s not pretty but does the job. Likely based on personal experience whether you prefer maintaining repetition or internals of third party libraries.