iOS-stylisch checkbox for react
npm install itsa-react-checkbox
Beautiful iOS-stylisch checkbox for react.
Lightweight, focussable and responses to the spacebar.
``js
const React = require("react"),
ReactDOM = require("react-dom"),
Checkbox = require("itsa-react-checkbox");
let props = {
checked: true
};
const handleChange = () => {
props.checked = !props.checked;
renderCheckBox();
};
const renderCheckBox = () => {
ReactDOM.render(
document.getElementById("container")
);
};
renderCheckBox();
`
You need the right css in order to make use of itsa-react-checkbox. There are 2 options:
1. You can use the css-files inside the css-folder.Component = require("itsa-react-checkbox/lib/component-styled.jsx");
2. You can use: and build your project with webpack. This is needed, because you need the right plugin to handle a requirement of the scss-file.
In adjunction with other itsa-react-components, you can build very sophisticated forms:
example sophisticated form with validation
This example has the following code:
####css
`css`
body {
padding: 2em;
}
#component-container {
width: 20em;
border: solid 1px #AAA;
padding: 1em;
background-color: #FAFAFA;
margin: 3em auto;
}
button {
width: 100%;
text-align: center;
margin-top: 1em;
}
form.invalid .formheader {
color: #F34F4F;
}
.checkbox-text {
color: #F34F4F;
visibility: hidden;
margin-top: 0.4em;
font-size: 0.8em;
}
.checkbox-error-text.checkbox-text {
visibility: visible;
}
.itsa-input.last {
margin-bottom: 1.4em;
}
.itsa-checkbox {
margin-right: 0.5em;
}
.form-text {
color: #444;
}
####html
`html`
####app.js
`js
"use strict";
import "purecss";
import "js-ext/lib/object";
import "js-ext/lib/string";
import "itsa-react-checkbox/css/component.scss";
import "itsa-react-input/css/component.scss";
import "itsa-react-input/css/purecss-component.scss";
import "itsa-react-textarea/css/component.scss";
const React = require("react"),
ReactDOM = require("react-dom"),
Input = require("itsa-react-input"),
MaskedInput = require("itsa-react-maskedinput"),
Checkbox = require("itsa-react-checkbox"),
Textarea = require("itsa-react-textarea"),
REG_EXP_PHONE = /^\(\d{0,3}\) \d{0,3}\-\d{0,4}$/;
/*
* Custom form-Component
*/
const MyForm = React.createClass({
focusUnvalidated() {
const instance = this;
const validated = instance.props.validated;
if (!validated.name) {
instance.refs.name.focus();
}
else if (!validated.email) {
instance.refs.email.focus();
}
else if (!validated.phone) {
instance.refs.phone.focus();
}
else if (!validated.password) {
instance.refs.password.focus();
}
else if (!validated.termsAccepted) {
instance.refs.terms.focus();
}
},
formValid() {
const validated = this.props.validated;
return validated.name && validated.email && validated.phone && validated.password && validated.termsAccepted;
},
getInitialState() {
return {
formValid: false,
formValidated: false
};
},
handleSubmit(e) {
const formValid = this.formValid();
e.preventDefault();
this.setState({
formValid,
formValidated: true
});
this.props.onSubmit && this.props.onSubmit({
formValid,
target: this
});
},
render() {
let formClass = "pure-form pure-form-stacked";
const props = this.props,
formValid = this.state.formValid,
formValidated = this.state.formValidated,
validatedText = formValid ? "valid" : "invalid",
validatedMsg = (
),
generalTermsMsgClass = "checkbox-text" + ((formValidated && !props.termsAccepted) ? " checkbox-error-text" : "");
formValid || (formClass+=" invalid");
return (
onSubmit={this.handleSubmit} >
{validatedMsg}
});
/*
* Event-hanldlers
*/
const handleChangeName = (e) => {
redefineProps('name', e.target.value);
};
const handleChangeEmail = (e) => {
redefineProps('email', e.target.value);
};
const handleChangePassword = (e) => {
redefineProps('password', e.target.value);
};
const handleChangePhone = (e) => {
redefineProps('phone', e.target.value);
};
const handleChangeComment = (e) => {
redefineProps('comment', e.target.value);
};
const handleSubmit = (e) => {
const formValid = e.formValid,
form = e.target;
formValid || form.focusUnvalidated();
};
const handleTermsAccepted = (e) => {
redefineProps('termsAccepted');
};
/*
* Validation
*/
const validate = (value, validators) => {
let valid;
if (!validators) {
return true;
}
validators.some(validatorKey => {
validatorsDefinition[validatorKey] && (valid=validatorsDefinitionvalidatorKey);
return !valid;
});
return !!valid;
};
const validatorsDefinition = {
checked(val) {
return !!val
},
email(val) {
return val.validateEmail(); // comes from itsa/lib/string
},
password(val) {
return val && (val.length>=5);
},
phone(val) {
return REG_EXP_PHONE.test(val) || !val;
},
required(val) {
return !!val;
}
};
const validateProps = props => {
props.each((value, key) => {
// only inspect primary type-properties
if (typeof props[key]!=="object") {
props.validated[key] = validate(props[key], props.validators[key]);
}
});
};
/*
* props
*/
let props = {
name: '',
email: '',
password: '',
comment: '',
phone: '',
termsAccepted: false,
onChangeName: handleChangeName,
onChangeEmail: handleChangeEmail,
onChangePassword: handleChangePassword,
onChangePhone: handleChangePhone,
onChangeComment: handleChangeComment,
onSubmit: handleSubmit,
onTermsAccepted: handleTermsAccepted,
validated: {},
validators: {
email: ["required", "email"],
name: ["required"],
phone: ["required", "phone"],
termsAccepted: ["checked"],
password: ["required", "password"]
}
};
const redefineProps = (key, value) => {
if (key==='termsAccepted') {
props.termsAccepted = !props.termsAccepted;
}
else {
props[key] = value;
}
validateProps(props);
renderForm(props);
};
/*
* React render form
*/
const renderForm = props => {
ReactDOM.render(
document.getElementById("component-container")
);
};
/*
* Initialization
*/
validateProps(props);
renderForm(props);
``
#### If you want to express your appreciation
Feel free to donate to one of these addresses; my thanks will be great :)
* Ether: 0xE096EBC2D19eaE7dA8745AA5D71d4830Ef3DF963
* Bitcoin: 37GgB6MrvuxyqkQnGjwxcn7vkcdont1Vmg