From 4ae55d8b3fcefd64d25a79661bdd2c5a4dfc958a Mon Sep 17 00:00:00 2001
From: kodai3 <k3dai.su3@gmail.com>
Date: Fri, 24 Jul 2020 21:01:16 +0900
Subject: [PATCH] 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 (
+    <FormControlLabel
+      classes={{
+        label: checked ? classes.labelChecked : '',
+      }}
+      {...props}
+    />
+  );
+};
+
+MyFormControlLabel.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export default function UseRadioGroup() {
+  return (
+    <RadioGroup defaultValue="first">
+      <MyFormControlLabel value="first" label="First" control={<Radio />} />
+      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
+    </RadioGroup>
+  );
+}
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 (
+    <FormControlLabel
+      classes={{
+        label: checked ? classes.labelChecked : '',
+      }}
+      {...props}
+    />
+  );
+};
+
+export default function UseRadioGroup() {
+  return (
+    <RadioGroup defaultValue="first">
+      <MyFormControlLabel value="first" label="First" control={<Radio />} />
+
+      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
+    </RadioGroup>
+  );
+}
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