modern-radio-buttons
v1.2.0
Published
Radio buttons so clean that they could end up in an Andy Warhol piece
Downloads
13
Maintainers
Readme
modern-radio-buttons
RadioSet
is a react component that allows the user to customize their radio buttons through images for a better user experience, while still getting the same functionality.
Visuals
The use of these radio buttons allow the user to input their own images as the blank and checked radio buttons, or use default circle svg's, in a layout they feel is necessary for their project. Below is an example of these radio buttons in a horizontal layout with svg files customized for this example.
Similar to this horizontal layout, these buttons can also be layed out vertically, as displayed in another image below.
Installation
- Install using npm or yarn (
npm i modern-radio-buttons
) - Import using
import RadioSet from 'modern-radio-buttons'
- Use throughout project
Usage
The given code snippet demonstrates how to utilize the RadioSet
module in another component.
import React, { Component } from 'react';
import logo from './logo.svg';
import fill from './Fill.svg'
import blank from './Blank.svg'
import './App.css';
import RadioSet from 'modern-radio-buttons';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<RadioSet
options={["One", "Two"]}
horizontal={false}
fill={ fill }
blank={ blank }
size="32px"
/>
</div>
);
}
}
export default App;
API
props
defaultIndex: int
The index of the value you want to be initially selected. Defaults to the first value if not specified.
options: string []
An array of strings that will generate the labels and values associated with radio buttons.
horizontal: boolean
A boolean that dictates whether the flow of buttons is vertical or Horizontal
fill: image
An image that should be included as the "checked" designator for buttons
blank: image
an image that should be included as the "blank" designator for buttons
size: int
The size of the radio buttons.
####color: string the color of the default circle button that will be used
####useImages: boolean a boolean that will dictate if images will be used, or if the default circle svg's will be used in place of images