From c42415e397034943d2c203bfc54c87d65530b5f9 Mon Sep 17 00:00:00 2001 From: kodai3 Date: Fri, 24 Jul 2020 17:29:44 +0900 Subject: [PATCH 1/5] add use-radio-group-context doc --- .../pages/components/radio-buttons/radio-buttons-de.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons-es.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons-fr.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons-ja.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons-pt.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons-ru.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons-zh.md | 10 ++++++++++ .../pages/components/radio-buttons/radio-buttons.md | 10 ++++++++++ 8 files changed, 80 insertions(+) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-de.md b/docs/src/pages/components/radio-buttons/radio-buttons-de.md index 197d69807c75da..9da413d1b4976a 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-de.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-de.md @@ -43,6 +43,16 @@ Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## When to use - [Kontrollkästchen vs. Optionsfeld (Radio Buttons)](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-es.md b/docs/src/pages/components/radio-buttons/radio-buttons-es.md index 99421dcef4c287..87c1cd378f383b 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-es.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-es.md @@ -43,6 +43,16 @@ Here is an example of customizing the component. You can learn more about this i {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## When to use - [Checkboxes vs. Botones de selección](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md index aca0e564e32cf4..7bc7c2211f7562 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md @@ -43,6 +43,16 @@ Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus da {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## Quand les utiliser - [Checkboxes vs. Cases d’option](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md index 0bdbb00fd287cd..6719c9a3276dc2 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md @@ -43,6 +43,16 @@ In general, radio buttons should have a value selected by default. If this is no {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +発展的な利用の為に、`useRadioGroup()` が用意されています。 +RadioGroupContextのvalueを返り値です。 +Radioコンポーネントが内部的にこれを使用しています。 + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## When to use - [Checkboxと Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md index 6cd9a2c6197611..f4bb730c4cc023 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md @@ -43,6 +43,16 @@ Aqui está um exemplo de customização do componente. Você pode aprender mais {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## Quando usar - [Caixas de seleção vs. Botões de opção](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md index 348a53576cda36..152b8f41d8a17c 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md @@ -43,6 +43,16 @@ In general, radio buttons should have a value selected by default. If this is no {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## Бесплатно - [Чекбоксы. Radio Buttons (радиокнопки)](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md index 63d2ff042fa0ed..9d7a8419f86c97 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md @@ -43,6 +43,16 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## 什么时候使用 - [复选框 对比 单选按钮](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md index 7eab4299035cc0..8c13f09ede32be 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons.md @@ -45,6 +45,16 @@ Here is an example of customizing the component. You can learn more about this i {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} +## `useRadioGroup` + +For advanced customization use cases, we expose a `useRadioGroup()` hook. +It returns the context value of RadioGroupContext. +The Radio component uses this hook internally. + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + ## When to use - [Checkboxes vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) From d843b2270ad13ccf5e7b092e1fba8966029eec0f Mon Sep 17 00:00:00 2001 From: kodai3 Date: Fri, 24 Jul 2020 19:52:02 +0900 Subject: [PATCH 2/5] reset translated files --- .../pages/components/radio-buttons/radio-buttons-de.md | 10 ---------- .../pages/components/radio-buttons/radio-buttons-es.md | 10 ---------- .../pages/components/radio-buttons/radio-buttons-fr.md | 10 ---------- .../pages/components/radio-buttons/radio-buttons-ja.md | 10 ---------- .../pages/components/radio-buttons/radio-buttons-pt.md | 10 ---------- .../pages/components/radio-buttons/radio-buttons-ru.md | 10 ---------- .../pages/components/radio-buttons/radio-buttons-zh.md | 10 ---------- 7 files changed, 70 deletions(-) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-de.md b/docs/src/pages/components/radio-buttons/radio-buttons-de.md index 9da413d1b4976a..197d69807c75da 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-de.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-de.md @@ -43,16 +43,6 @@ Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. -The Radio component uses this hook internally. - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## When to use - [Kontrollkästchen vs. Optionsfeld (Radio Buttons)](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-es.md b/docs/src/pages/components/radio-buttons/radio-buttons-es.md index 87c1cd378f383b..99421dcef4c287 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-es.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-es.md @@ -43,16 +43,6 @@ Here is an example of customizing the component. You can learn more about this i {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. -The Radio component uses this hook internally. - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## When to use - [Checkboxes vs. Botones de selección](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md index 7bc7c2211f7562..aca0e564e32cf4 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md @@ -43,16 +43,6 @@ Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus da {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. -The Radio component uses this hook internally. - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## Quand les utiliser - [Checkboxes vs. Cases d’option](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md index 6719c9a3276dc2..0bdbb00fd287cd 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md @@ -43,16 +43,6 @@ In general, radio buttons should have a value selected by default. If this is no {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -発展的な利用の為に、`useRadioGroup()` が用意されています。 -RadioGroupContextのvalueを返り値です。 -Radioコンポーネントが内部的にこれを使用しています。 - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## When to use - [Checkboxと Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md index f4bb730c4cc023..6cd9a2c6197611 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md @@ -43,16 +43,6 @@ Aqui está um exemplo de customização do componente. Você pode aprender mais {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. -The Radio component uses this hook internally. - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## Quando usar - [Caixas de seleção vs. Botões de opção](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md index 152b8f41d8a17c..348a53576cda36 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md @@ -43,16 +43,6 @@ In general, radio buttons should have a value selected by default. If this is no {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. -The Radio component uses this hook internally. - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## Бесплатно - [Чекбоксы. Radio Buttons (радиокнопки)](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md index 9d7a8419f86c97..63d2ff042fa0ed 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md @@ -43,16 +43,6 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel {{"demo": "pages/components/radio-buttons/CustomizedRadios.js"}} -## `useRadioGroup` - -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. -The Radio component uses this hook internally. - -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` - ## 什么时候使用 - [复选框 对比 单选按钮](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) From 4ae55d8b3fcefd64d25a79661bdd2c5a4dfc958a Mon Sep 17 00:00:00 2001 From: kodai3 Date: Fri, 24 Jul 2020 21:01:16 +0900 Subject: [PATCH 3/5] add demo & return interface --- .../components/radio-buttons/UseRadioGroup.js | 48 +++++++++++++++++++ .../radio-buttons/UseRadioGroup.tsx | 46 ++++++++++++++++++ .../components/radio-buttons/radio-buttons.md | 12 +++-- 3 files changed, 103 insertions(+), 3 deletions(-) create mode 100644 docs/src/pages/components/radio-buttons/UseRadioGroup.js create mode 100644 docs/src/pages/components/radio-buttons/UseRadioGroup.tsx diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.js b/docs/src/pages/components/radio-buttons/UseRadioGroup.js new file mode 100644 index 00000000000000..e346bc2705eeb6 --- /dev/null +++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.js @@ -0,0 +1,48 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import Radio from '@material-ui/core/Radio'; +import PropTypes from 'prop-types'; + +const useStyles = makeStyles((theme) => ({ + labelChecked: { + color: theme.palette.secondary.main, + fontWeight: 'bold', + textDecoration: 'underline', + }, +})); + +const MyFormControlLabel = (props) => { + const classes = useStyles(); + + const radioGroup = useRadioGroup(); + + let checked = false; + + if (radioGroup) { + checked = radioGroup.value === props.value; + } + + return ( + + ); +}; + +MyFormControlLabel.propTypes = { + value: PropTypes.string.isRequired, +}; + +export default function UseRadioGroup() { + return ( + + } /> + } /> + + ); +} diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx new file mode 100644 index 00000000000000..97e6b6b4ed9aaa --- /dev/null +++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup'; +import FormControlLabel, { + FormControlLabelProps, +} from '@material-ui/core/FormControlLabel'; +import Radio from '@material-ui/core/Radio'; + +const useStyles = makeStyles((theme) => ({ + labelChecked: { + color: theme.palette.secondary.main, + fontWeight: 'bold', + textDecoration: 'underline', + }, +})); + +const MyFormControlLabel = (props: FormControlLabelProps) => { + const classes = useStyles(); + + const radioGroup = useRadioGroup(); + + let checked = false; + + if (radioGroup) { + checked = radioGroup.value === props.value; + } + + return ( + + ); +}; + +export default function UseRadioGroup() { + return ( + + } /> + + } /> + + ); +} diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md index 8c13f09ede32be..67f12d9e2788d4 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons.md @@ -51,9 +51,15 @@ For advanced customization use cases, we expose a `useRadioGroup()` hook. It returns the context value of RadioGroupContext. The Radio component uses this hook internally. -```jsx -import { useRadioGroup } from '@material-ui/core/RadioGroup'; -``` +#### Returns + +`value` (_Object_): + +- `value.name` (_String_ [optional]): The name used to reference the value of the control. +- `value.onChange` (_Void_ [optional]): Callback fired when a radio button is selected. +- `value.value` (_Any_ [optional]): Value of the selected radio button. + +{{"demo": "pages/components/radio-buttons/UseRadioGroup.js"}} ## When to use From ccf466f980ccf0cc5f7a8d988382cfb279730969 Mon Sep 17 00:00:00 2001 From: kodai3 Date: Fri, 24 Jul 2020 21:10:18 +0900 Subject: [PATCH 4/5] fix type --- docs/src/pages/components/radio-buttons/UseRadioGroup.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.js b/docs/src/pages/components/radio-buttons/UseRadioGroup.js index e346bc2705eeb6..47d06a86086d03 100644 --- a/docs/src/pages/components/radio-buttons/UseRadioGroup.js +++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.js @@ -1,9 +1,9 @@ import React from 'react'; +import PropTypes from 'prop-types'; import { makeStyles } from '@material-ui/core/styles'; import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup'; import FormControlLabel from '@material-ui/core/FormControlLabel'; import Radio from '@material-ui/core/Radio'; -import PropTypes from 'prop-types'; const useStyles = makeStyles((theme) => ({ labelChecked: { @@ -35,7 +35,10 @@ const MyFormControlLabel = (props) => { }; MyFormControlLabel.propTypes = { - value: PropTypes.string.isRequired, + /** + * The value of the component. + */ + value: PropTypes.any, }; export default function UseRadioGroup() { From 938e0b75fbff2cd17921d681e3603a72e870309e Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Fri, 24 Jul 2020 23:33:19 +0200 Subject: [PATCH 5/5] polish --- .../components/radio-buttons/UseRadioGroup.js | 9 +++---- .../radio-buttons/UseRadioGroup.tsx | 24 +++++++++---------- .../components/radio-buttons/radio-buttons.md | 12 ++++++++-- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.js b/docs/src/pages/components/radio-buttons/UseRadioGroup.js index 47d06a86086d03..d04ad417931d8f 100644 --- a/docs/src/pages/components/radio-buttons/UseRadioGroup.js +++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.js @@ -8,14 +8,11 @@ import Radio from '@material-ui/core/Radio'; const useStyles = makeStyles((theme) => ({ labelChecked: { color: theme.palette.secondary.main, - fontWeight: 'bold', - textDecoration: 'underline', }, })); -const MyFormControlLabel = (props) => { +function MyFormControlLabel(props) { const classes = useStyles(); - const radioGroup = useRadioGroup(); let checked = false; @@ -32,7 +29,7 @@ const MyFormControlLabel = (props) => { {...props} /> ); -}; +} MyFormControlLabel.propTypes = { /** @@ -43,7 +40,7 @@ MyFormControlLabel.propTypes = { export default function UseRadioGroup() { return ( - + } /> } /> diff --git a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx index 97e6b6b4ed9aaa..18e4b295d7f77e 100644 --- a/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx +++ b/docs/src/pages/components/radio-buttons/UseRadioGroup.tsx @@ -1,22 +1,21 @@ import React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; +import { makeStyles, createStyles } from '@material-ui/core/styles'; import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup'; import FormControlLabel, { FormControlLabelProps, } from '@material-ui/core/FormControlLabel'; import Radio from '@material-ui/core/Radio'; -const useStyles = makeStyles((theme) => ({ - labelChecked: { - color: theme.palette.secondary.main, - fontWeight: 'bold', - textDecoration: 'underline', - }, -})); +const useStyles = makeStyles((theme) => + createStyles({ + labelChecked: { + color: theme.palette.secondary.main, + }, + }), +); -const MyFormControlLabel = (props: FormControlLabelProps) => { +function MyFormControlLabel(props: FormControlLabelProps) { const classes = useStyles(); - const radioGroup = useRadioGroup(); let checked = false; @@ -33,13 +32,12 @@ const MyFormControlLabel = (props: FormControlLabelProps) => { {...props} /> ); -}; +} export default function UseRadioGroup() { return ( - + } /> - } /> ); diff --git a/docs/src/pages/components/radio-buttons/radio-buttons.md b/docs/src/pages/components/radio-buttons/radio-buttons.md index 67f12d9e2788d4..9e815e64727754 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons.md @@ -47,10 +47,16 @@ Here is an example of customizing the component. You can learn more about this i ## `useRadioGroup` -For advanced customization use cases, we expose a `useRadioGroup()` hook. -It returns the context value of RadioGroupContext. +For advanced customization use cases, a `useRadioGroup()` hook is exposed. +It returns the context value of the parent radio group. The Radio component uses this hook internally. +### API + +```jsx +import { useRadioGroup } from '@material-ui/core/RadioGroup'; +``` + #### Returns `value` (_Object_): @@ -59,6 +65,8 @@ The Radio component uses this hook internally. - `value.onChange` (_Void_ [optional]): Callback fired when a radio button is selected. - `value.value` (_Any_ [optional]): Value of the selected radio button. +#### Example + {{"demo": "pages/components/radio-buttons/UseRadioGroup.js"}} ## When to use