React Checkbox

React custome checkbox

by fretwiz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.my-custom-checkbox{
    border:1px solid #555;
    border-radius:4px;
}

JavaScript 1.7

var Checkbox = React.createClass({
		getDefaultProps: function() {
   	 	return {
      	value: true,
        name: '',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: '#c3c4c6',
        borderRadius: '4px',
        checkColor: '#60cd18',
        height: '1px',
        width: '',
        namePaddingLeft: '10px',
        namePaddingRight: ''
    	};
  	},
    render: function() {
        var style = {
        	boxStyle: {
          	borderWidth: this.props.borderWidth,
            borderStyle: this.props.borderStyle,
            borderColor: this.props.borderColor,
            borderRadius: this.props.borderRadius,
            paddingLeft: this.props.width,
  					paddingRight: this.props.width,
            paddingTop: this.props.height,
            paddingBottom: this.props.height
          },
          show: {
          	visibility: 'visible',
            color: this.props.checkColor
          },
          hidden: {
          	visibility: 'hidden',
            color: this.props.checkColor
          },
          name: {
          	paddingLeft: this.props.namePaddingLeft,
            paddingRight: this.props.namePaddingRight
          }
        };
        return (
        <div>
        	<span style={style.boxStyle}>
    				<i className="fa fa-check fa-lg" style={(this.props.value) ? style.show : style.hidden}></i>
					</span>
           <span style={style.name}>{this.props.name}</span>
        </div>
        );
    }
});

var WrapperCheckbox = React.createClass({ 
	getInitialState: function(){
  	return {value: false}
  },
  handleClick: function(){
  	console.log('Click Fires!');
    this.setState({value: !this.state.value});
  },
	render: function(){
  	return (
    	<div onClick={this.handleClick}>
    		<Checkbox name='Reserve Guarantee' value={this.state.value}/>
      </div>
    );
  }
});

React.render(<WrapperCheckbox />, document.getElementById('container'));