# chakra-radio-group

> Custom radio group component built with Chakra-UI

Latest version **1.1.2** (published 2022-11-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install chakra-radio-group
pnpm add chakra-radio-group
yarn add chakra-radio-group
bun add chakra-radio-group
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-11-10 |
| First published | 2022-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 0 |
| Unpacked size | 38.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | sudo-labs |
| Maintainers | sudo-labs |
| Keywords | react, chakra, chakra-radio, chakra-radio-group, radio-group |

## Links

- npm: https://www.npmjs.com/package/chakra-radio-group
- Repository: https://github.com/sudolabs-io/chakra-radio-group
- Homepage: https://github.com/sudolabs-io/chakra-radio-group#readme
- Issues: https://github.com/sudolabs-io/chakra-radio-group/issues
- npm.io page: https://npm.io/package/chakra-radio-group

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2022-11-10
- 1.1.1 — 2022-11-10
- 1.1.0 — 2022-11-09
- 1.0.0 — 2022-11-09

## README

# Chakra Radio Group

This component is a custom solution for Radio Group Select, built with [@chakra-ui/react](https://www.npmjs.com/package/@chakra-ui/react) and [react-render-prop-type](https://www.npmjs.com/package/react-render-prop-type).

## Usage

To use this package install it with one of these commands:

```bash
npm install chakra-radio-group
```

or

```bash
yarn add chakra-radio-group
```

### Example

```js
<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>
```

### Props

#### Radio Group

- `options` - [❗️] - Array of objects
- `getOptionValue` - [❗️] - A function that chooses which property from the object from options will be chosen as the value for **Radio Group Item** component
- `value` - [❓] - String value from options which matches the key from **_getOptionValue_** function
- `defaultValue` - [❓] - String value from options which matches the key from **_getOptionValue_** function
- `name` - [❓] - String value which sets the input name attribute
- `onChange` - [❓] - Custom function to handle the _onChange_ event
- `generalStyles` - [❓] - Object of multiple CSS properties to style **Radio Group Item** component
- `hoverStyles` - [❓] - Object of multiple CSS properties which are set on _hover_ state
- `focusStyles` - [❓] - Object of multiple CSS properties which are set on _focus_ state

#### Radio Group - Render Props

- `option` - Object from **_options_**
- `radioProps` - Object which contains **Radio Group** id, name, value, state, etc.

> ❗️ = Required property
>
> ❓ = Optional property

## Storybook

To test out the package, clone the repository to your local machine and use one of following commads:

```bash
npm run storybook
```

or

```bash
yarn storybook
```

> This loads the stories from `./stories`.

---
_Source: https://npm.io/package/chakra-radio-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._