Expose RadioGroupContext via useRadioGroup Hook
See original GitHub issue- 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:2
- Comments:10 (8 by maintainers)
Top GitHub Comments
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.
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.