react-custom-radio-checkbox v1.0.2

Simple React Custom Checkbox and Radio input

Simple custom radio and checkbox input.

Installation

Install react-custom-radio-checkbox with npm:

$ npm install react-custom-radio-checkbox --save

Quick Start

import React from "react";
import ReactDOM from "react-dom";
import { CustomRadio, CustomCheckbox } from "react-custom-radio-checkbox";

const options = [
  {
    label: "France",
    value: "FR"
  },
  {
    label: "China",
    value: "CN"
  },
  {
    label: "New Zealand",
    value: "NZ"
  },
  {
    label: "Ukraine",
    value: "UA"
  }
];
const radioChange = e => {
  console.log(e.target.value);
};
const checkboxChange = e => {
  console.log(e.target.checked);
};
const App = () => (
  <div>
    {options.map(option => (
      <CustomRadio
        key={option.value}
        label={option.label}
        name="country"
        value={option.value}
        style={{ display: "block" }}
        onChange={radioChange}
      />
    ))}
    <div>
      <CustomCheckbox label="Remember Me" onChange={checkboxChange} />
    </div>
  </div>
);

ReactDOM.render(<App />, document.getElementById("root"));

Demo

Props