react-rondo v0.0.1
Rondo
A simple library for writing forms in React. Rondo aims to do as little as possible, leveraging the browsers built in form capabilities to do the heavy lifting. This allows us to build powerful forms with little code.
Resources
Rondo uses native web APIs wherever possible. Here are a couple you will run in to when using the library.
FormData
- an object that captures your forms data.ValidityState
- an interface that represents the reasons a field might be invalid.
Installation
yarn add react-rondo
Usage
import {useForm} from 'react-rondo';
function App() {
const {Form} = useForm({
async onSubmit(formData) {
await fetch('/api', {
method: 'POST',
body: formData
})
})
});
return (
<Form>
<label>
Email
<input
type="email"
name="email"
/>
</label>
<input type="submit" />
</Form>
);
}
Validation
Rondo leverages the constraint validation API to provide powerful validation right out of the box. All you need to do is decorate your fields with validation attributes such as required
, pattern
, or maxlength
. From there, rondo will gather all of your forms errors and return them in an errors
object.
The browser provides a ton of built in error messages for all types of scenarios, but if you'd like to override some of these defaults you can do so with the customMessage
option. Here you can provide a function that returns a custom message for each of your fields. This function will be passed a ValidityState
object to let you know which validations have been triggered.
import {useForm} from 'react-rondo';
function App() {
const {Form, errors} = useForm({
customMessage: {
email(validity) {
if (validity.valueMissing) {
return 'Make sure to include an email address';
}
if (validity.typeMismatch) {
return 'Please enter a valid email address';
}
}
}
async onSubmit(formData) {
// Handle api call
})
});
return (
<Form>
<label>
Email
<input
required
type="email"
name="email"
aria-invalid={'email' in errors}
aria-describedby={'email' in errors ? 'emailError' : undefined}
/>
{'email' in errors ? (
<span id="emailError">{errors.email.message}</span>
) : null}
</label>
<input type="submit" />
</Form>
);
}
Cancelling inflight form submissions
Rondo makes it easy to avoid overlapping form submissions. All you need to do to take advantage of this is pass the signal
to your fetch
call. Rondo uses an AbortController
under the hook to manage this.
import {useForm} from 'react-rondo';
function App() {
const {Form} = useForm({
async onSubmit(formData, signal) {
const response = await fetch('/api', {
method: 'POST',
body: formData,
signal,
});
if (response.ok) {
return {
status: 'success',
};
} else {
return {
stutus: 'failed',
errors: {},
};
}
},
});
return (
<Form>
<label>
Email
<input type="email" name="email" />
</label>
<input type="submit" />
</Form>
);
}
3 years ago