This component is a custom solution for Radio Group Select, built with @chakra-ui/react and react-render-prop-type.
To use this package install it with one of these commands:
npm install chakra-radio-group
or
yarn add chakra-radio-group
<RadioGroup
options={[{ title: 'Test Title' }]}
getOptionValue={({ title }) => title}
hoverStyles={{
outlineWidth: '1px',
outlineColor: 'blue.300',
outlineStyle: 'solid',
}}
focusStyles={{
outlineWidth: '1px',
outlineColor: 'blue.500',
outlineStyle: 'solid',
}}
>
{({ option, radioProps }) => (
<Flex
bgColor={radioProps.isChecked ? 'blue.200' : 'blue.50'}
p="5"
minW="48"
align="center"
>
<Text>{option.title}</Text>
</Flex>
)}
</RadioGroup>
options
- [❗️] - Array of objectsgetOptionValue
- [❗️] - A function that chooses which property from the object from options will be chosen as the value for Radio Group Item componentvalue
- [❓] - String value from options which matches the key from getOptionValue functiondefaultValue
- [❓] - String value from options which matches the key from getOptionValue functionname
- [❓] - String value which sets the input name attributeonChange
- [❓] - Custom function to handle the onChange eventgeneralStyles
- [❓] - Object of multiple CSS properties to style Radio Group Item componenthoverStyles
- [❓] - Object of multiple CSS properties which are set on hover statefocusStyles
- [❓] - Object of multiple CSS properties which are set on focus state
option
- Object from optionsradioProps
- Object which contains Radio Group id, name, value, state, etc.
❗️ = Required property
❓ = Optional property
To test out the package, clone the repository to your local machine and use one of following commads:
npm run storybook
or
yarn storybook
This loads the stories from
./stories
.