0.0.1 • Published 6 years ago
react-styled-radio v0.0.1
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
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>
);
...
- 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
- Setup project & start rollup watch
npm install && npm start
yarn install && yarn add
- Setup react app & start dev server
cd example
npm install && npm start
yarn install && yarn start
Shoutouts
- Setup: create-react-library 🙌
License
MIT © alexcasche