Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
formsy-react
Advanced tools
Readme
A form input builder and validator for React.
Quick Start | API | 1.x API |
---|
christianalfoni wrote an article on forms and validation with React, Nailing that validation with React JS, the result of that was this library.
The main concept is that forms, inputs, and validation are done very differently across developers and projects. This React component aims to be that “sweet spot” between flexibility and reusability.
This project was originally located at christianalfoni/formsy-react if you're looking for old issues.
onSubmit
, onValid
, etc.)yarn add formsy-react react react-dom
and use with webpack, browserify, etc.
The 2.0 release fixed a number of legacy decisions in the Formsy API, mostly a reliance on function props over value props passed down to wrapped components. However, the API changes are minor and listed below.
getErrorMessage()
=> errorMessage
getErrorMessages()
=> errorMessages
getValue()
=> value
hasValue()
=> hasValue
isFormDisabled():
=> isFormDisabled
isFormSubmitted()
=> isFormSubmitted
isPristine()
=> isPristine
isRequired()
=> isRequired
isValid():
=> isValid
showError()
=> showError
showRequired()
=> showRequired
// MyInput.js
import { withFormsy } from 'formsy-react';
import React from 'react';
class MyInput extends React.Component {
constructor(props) {
super(props);
this.changeValue = this.changeValue.bind(this);
}
changeValue(event) {
// setValue() will set the value of the component, which in
// turn will validate it and the rest of the form
// Important: Don't skip this step. This pattern is required
// for Formsy to work.
this.props.setValue(event.currentTarget.value);
}
render() {
// An error message is passed only if the component is invalid
const errorMessage = this.props.errorMessage;
return (
<div>
<input onChange={this.changeValue} type="text" value={this.props.value || ''} />
<span>{errorMessage}</span>
</div>
);
}
}
export default withFormsy(MyInput);
withFormsy
is a Higher-Order Component that
exposes additional props to MyInput
. See the API documentation to view a complete list of the
props.
import Formsy from 'formsy-react';
import React from 'react';
import MyInput from './MyInput';
export default class App extends React.Component {
constructor(props) {
super(props);
this.disableButton = this.disableButton.bind(this);
this.enableButton = this.enableButton.bind(this);
this.state = { canSubmit: false };
}
disableButton() {
this.setState({ canSubmit: false });
}
enableButton() {
this.setState({ canSubmit: true });
}
submit(model) {
fetch('http://example.com/', {
method: 'post',
body: JSON.stringify(model),
});
}
render() {
return (
<Formsy onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}>
<MyInput name="email" validations="isEmail" validationError="This is not a valid email" required />
<button type="submit" disabled={!this.state.canSubmit}>
Submit
</button>
</Formsy>
);
}
}
This code results in a form with a submit button that will run the submit
method when the form is submitted with a
valid email. The submit button is disabled as long as the input is empty (required) and the value is
not an email (isEmail). On validation error it will show the message: "This is not a valid email".
See the API for more information.
yarn
yarn lint
runs lint checksyarn test
runs the testsnpm run deploy
build and release formsyCheck out our Changelog and releases
FAQs
A form input builder and validator for React
The npm package formsy-react receives a total of 17,833 weekly downloads. As such, formsy-react popularity was classified as popular.
We found that formsy-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 10 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.