Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@cat-react/form
Advanced tools
A simple yet powerful library which helps creating validated forms in react.
A simple yet powerful library which helps creating validated forms in react. This project is inspired by formsy-react.
@cat-react/form
yarn add @cat-react/form
or npm install @cat-react/form --save
)import {Form, Input} from '@cat-react/form';
Are you looking for a simple way to create validated forms with React?
Congratulations! Your search is over, because @cat-react/form
offers you a simple way to create either frontend- or backend-validated forms.
Take a look at the examples to find out how to create the form of your desire.
<Form>
<MyInput name="email"
validations={{
isEmail: true,
isRequired: true
}}/>
<MyInput name="email_confirm"
validations={{
isRequired: true,
equalsField: 'email'
}}
messages={{
isRequired: 'Please confirm your email address.',
equalsField: 'The email addresses do not match each other.'
}}/>
</Form>
Here you can see an example of an custom TextInput which shows how you can implement your own Inputs:
import React from 'react';
import Input from '@cat-react/form/Input'
@Input
export default class BasicInput extends React.Component {
onChange(event) {
this.props.setValue(event.target.value);
}
getClassName() {
let className = 'form-control';
if (!this.props.isPristine()) {
if (this.props.isValid()) {
const isWarning = this.props.getMessages().length > 0;
if (isWarning) {
className += ' warning';
}
} else {
className += ' error';
}
}
return className;
}
renderMessages() {
let messages = [];
if (!this.props.isPristine()) {
messages = this.props.getMessages();
}
if (!messages || messages.length <= 0) {
return null;
}
let className = 'errorText';
if (this.props.isValid()) {
className = 'warningText';
}
return <ul className={className}>{messages.map((message, i) => <li key={i}>{message}</li>)}</ul>;
}
render() {
return (
<div className="form-group">
<label htmlFor={this.props.name}>{this.props.label} {this.props.isRequired() ? '*' : null}</label>
<input type={this.props.type}
className={this.getClassName()}
id={this.props.name}
aria-describedby={this.props.name}
placeholder={this.props.placeholder}
value={this.props.getValue()}
onChange={this.onChange.bind(this)}
onBlur={this.props.touch}/>
{this.renderMessages()}
</div>
);
}
}
The project requires at least the latest stable version of node and npm. You also need to have yarn installed globally.
Two simple steps to get the things running on your local machine:
yarn
You can run the examples with yarn run examples
and the tests with yarn test
.
Copyright (c) 2017 Catalysts GmbH
FAQs
A simple yet powerful library which helps creating validated forms in react.
The npm package @cat-react/form receives a total of 7 weekly downloads. As such, @cat-react/form popularity was classified as not popular.
We found that @cat-react/form demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.