xs-checkbox

Simple CheckBox, with

• user customizable icons
• check/unchecked label text
• returns expected e.target object for controlled forms

Installation

Use npm, yarn os other npm package manager you choose to install xs-checkbox.

# npm 
npm i -S xs-checkbox
 
# yarn 
yarn add xs-checkbox

Usage

Three examples below, show

1. Simplest: default checkmark
2. Custom Icon, shows when 'checked'
3. Check & unchecked icons, checked & unchecked text

import CheckBox from 'xs-checkbox'
 
...
 
handleCheckBoxChange(e){
  // do something with checked value
  console.log(`${e.target.name}, checked: ${e.target.checked}`)
}
...
 
<CheckBox
  checked
  text='Default checkmark'
  name='Checkbox1'
  onChange={this.handleCheckBoxChange}
/>
 
<CheckBox
  checked
  text='Much-room to grow'
  name='Checkbox3'
  checkedIcon='🍄'
  onChange={this.handleCheckBoxChange}
/>
 
<CheckBox
  checked
  name='emperorsChoice'
  checkedIcon='👍🏻'
  unCheckedIcon='👎🏻'
  checkedText='Yeah, baby!'
  unCheckedText='Off with his head!'
  onChange={this.handleCheckBoxChange}
/>

Style

Using component element classes

 
.xs-checkbox {
  height: 25px;
}
.xs-checkbox-icon {
  min-width: 25px;
}
 
.xs-checkbox-text {
  color: #666;
}
 

Contributing

Issues and Pull requests are always welcome. Please keep in mind that there is a code of conduct.

To get started, install the dev dependencies and build the exports if needed.

# install dependencies 
npm install
 
# build the project for distribution 
npm run build:prod

Code of Conduct

License