react-styled-radio

Radio button component for React built with styled-components < 💅>

Install

npm install --save react-styled-radio
yarn add react-styled-radio

Usage

• Import the RadioGroup & Radio components from module
• Wrap the Radios inside the RadioGroup
• Wrap the Radio components inside the RadioGroup
• Set RadioGroup name prop
• Set Radios value & label props
• Pass in any other desired props (see props section)

import React, { Component } from 'react';
import { RadioGroup, Radio } from 'react-styled-radio';

class Example extends Component {
  render () {
    return (
      <RadioGroup horizontal name="gender">
        <Radio small value="male" label="male"/>
        <Radio small value="female" label="female"/>
      </RadioGroup>
    )
  }
}

Features

• Only three peer depencies (react/prop-types/styled-components)
• Easy to use BEM class hooks

Examples

• Demo - https://alexcasche.github.io/react-styled-radio/

Props

The RadioGroup component accepts the following props.

| Prop | Type | Default | Description: Options | |-------------------|-------------|------------------|---------------------------| | vertical | boolean | false | Display radios vertically | | onChange | function | null | Function to run when value changes |

The Radio component accepts the following props.

| Prop | Type | Default | Description: Options | |-------------------|-------------|------------------|--------------------------| | small | boolean | false | Button size | | large | boolean | false | Button size | | handleChange | function | null | Function to run when value changes |

The handleChange prop is automatically passed the event object. See below example.

class Example extends Component {
  onChange = e => {
    console.log(e.target.value)
    /*  
      If the first radio is clicked this will log 'male'
      If the second radio is clicked this will log 'female' 
    */
  }
  render () {
    return (
      <RadioGroup horizontal name="gender" onChange={this.onChange}>
        <Radio small value="male" label="male"/>
        <Radio small value="female" label="female"/>
      </RadioGroup>
    )
  }
}

Theme

The theme object can be used to customize the look of the components, with the following values.

| Prop | Type | Default | |-------------------|-------------|------------------| | inputBg | string | #20232A | | inputBorder | string | #292C34 | | inputColor | string | #212529 | | inputPlace | string | #6B757C | | inputOutline | string | #007BFF | | inputLabel | string | #212529 |

There are two ways to use the theme object.

1. Pass the theme to the styled-components ThemeProvider (recommended)

import { ThemeProvider } from 'styled-components';

...
return (
  <ThemeProvider theme={theme}>
    <RadioGroup horizontal name="gender" handleChange={this.handleChange}>
      <Radio small value="male" label="male"/>
      <Radio small value="female" label="female"/>
    </RadioGroup>
  </ThemeProvider>
);
...

2. Pass the theme directly to the Radio components (not recommended)

...
return (
  <RadioGroup horizontal name="gender" handleChange={this.handleChange}>
    <Radio theme={theme} small value="male" label="male"/>
    <Radio theme={theme} small value="female" label="female"/>
  </RadioGroup>
);
...

Classes

| Class | Description | |------------------------|--------------------| | .radio__group | Radio group wrapper | | .radio__button | Radio button wrapper | | .radio__text | Radio button label |

Development

Follow these steps to setup a local development environment. Use yarn or npm - not both.

1. Clone the repo from Github

git clone https://github.com/alexcasche/react-styled-radio

2. Setup project & start rollup watch

npm install && npm start
yarn install && yarn add

3. Setup react app & start dev server

cd example
npm install && npm start
yarn install && yarn start

Shoutouts

• Setup: create-react-library 🙌

License

MIT © alexcasche