Skip to content

Instantly share code, notes, and snippets.

@PieterScheffers
Created December 5, 2019 16:50
Show Gist options
  • Save PieterScheffers/91b14c46a3894740dba82cf39047a3ad to your computer and use it in GitHub Desktop.
Save PieterScheffers/91b14c46a3894740dba82cf39047a3ad to your computer and use it in GitHub Desktop.
react checkbox
import React from 'react';
import PropTypes from 'prop-types';
const style = {
label: {
display: 'inline',
fontFamily: 'RobotoCondensed-Regular, sans-serif',
userSelect: 'none', // disable text selection
fontWeight: 'bold'
},
checkbox: {
display: 'none'
},
checkboxPlusLabel: {
backgroundColor: '#fafafa',
border: '1px solid #cacece',
// boxShadow: '0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05)',
padding: '18px',
borderRadius: '3px',
display: 'inline-block',
position: 'relative'
},
checkboxCheckedPlusLabel: {
backgroundColor: 'red',
border: '1px solid #adb8c0',
boxShadow: [
'0 1px 2px rgba(0,0,0,0.05)',
'inset 0px -15px 10px -12px rgba(0,0,0,0.05)',
'inset 15px 10px -12px rgba(255,255,255,0.1)'
].join(', '),
color: 'white'
},
checkboxCheckedPlusLabelAfter: {
fontSize: '28px',
position: 'absolute',
top: '0px',
left: '6px',
color: '#99a1a7'
}
};
export default function CheckboxButton(props) {
let id = props.id;
if (!props.id) {
id = String(Math.round(Math.random() * 10000000000000000));
}
const checkboxStyle = {
...style.checkbox
};
const labelStyle = {
...style.label,
...style.checkboxPlusLabel,
...(props.checked ? style.checkboxCheckedPlusLabel : {}),
...(props.style || {}),
...(props.checked ? props.checkedStyle : {})
};
const labelAfterStyle = {
...(props.checked ? style.checkboxCheckedPlusLabelAfter : {})
};
return (
<div>
<input style={checkboxStyle} type="checkbox" id={id} checked={props.checked} onChange={props.onChange} />
<label style={labelStyle} htmlFor={id}>{props.label}</label>
<div style={labelAfterStyle} />
</div>
);
}
CheckboxButton.propTypes = {
label: PropTypes.string.isRequired,
id: PropTypes.string,
checked: PropTypes.bool.isRequired,
onChange: PropTypes.func.isRequired,
style: PropTypes.object,
checkedStyle: PropTypes.object
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment