Ninja Pumpkin Mutants

    react-icheck

    0.3.8 • Public • Published

    React-iCheck

    NPM version Build Status

    Dependency Status devDependency Status peerDependency Status

    iCheck components built with React. No jQuery and Zepto

    Online demo: http://luqin.github.io/react-icheck

    Note: React-iCheck still in development

    Skins

    Features

    • Identical inputs across different browsers and devices — both desktop and mobile
    • Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
    • Keyboard accessible inputsTab, Spacebar, Arrow up/down and other shortcuts
    • Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
    • No jQuery and Zepto
    • Screenreader accessible inputsARIA attributes for VoiceOver and others
    • Lightweight size

    By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).

    Usage

    npm install react-icheck icheck --save
    import 'icheck/skins/all.css'; // or single skin css
     
    import {Checkbox, Radio} from 'react-icheck';
     
    // Checkbox with label
    <Checkbox
      checkboxClass="icheckbox_square-blue"
      increaseArea="20%"
      label="Checkbox"
    />
     
    // without label
    <Checkbox
      id="checkbox1"
      checkboxClass="icheckbox_square-blue"
      increaseArea="20%"
    />
    <label htmlFor="checkbox1">First name</label>
     
    // Radio
    <Radio
      name="aa"
      radioClass="iradio_square-blue"
      increaseArea="20%"
      label="Radio"
    />
    import {Radio, RadioGroup} from 'react-icheck';
     
    <RadioGroup name="radio" value="3">
        <Radio
          value="3"
          radioClass="iradio_square-blue"
          increaseArea="20%"
          label="Radio, <span class='label1'>#input-3</span>"
        />
        <Radio
          value="4"
          radioClass="iradio_square-blue"
          increaseArea="20%"
          label="Radio, <span class='label1'>#input-4</span>"
        />
        <Radio
          value="5"
          radioClass="iradio_square-blue"
          increaseArea="20%"
          label="Radio, <span class='label1'>#disabled</span>"
          disabled
        />
    </RadioGroup>

    More examples: Online demo, Source

    Browser support

    iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

    Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.

    Contribute

    Dev base on react-component-tools

    $ git clone https://github.com/luqin/react-icheck.git
    cd react-icheck
    $ npm install
    $ npm start # Run the docs site in development mode. This will watch for file changes as you work. And auto refresh the page to see the updates. 

    Install

    npm i react-icheck

    DownloadsWeekly Downloads

    1,799

    Version

    0.3.8

    License

    ISC

    Last publish

    Collaborators

    • luqin