Scroll to an error plugin for Roqueform
Roqueform plugin that enables scrolling to a field that has an associated validation error.
npm install --save-prod @roqueform/scroll-to-error-pluginOverview
🔎 API documentation is available here.
This plugin works best in conjunction with the errorsPlugin or any of the
validation plugins. If an element associated with the field via
ref is
displayed and an the field is invalid than scrollToError() would scroll the viewport, so the element is reveled on the
screen.
This plugin doesn't require any rendering framework. To simplify the usage example, we're going to use the React integration.
import { SyntheticEvent, useEffect } from 'react';
import { composePlugins, errorsPlugin } from 'roqueform';
import { FieldRenderer, useField } from '@roqueform/react';
import { scrollToErrorPlugin } from '@roqueform/scroll-to-error-plugin';
export const App = () => {
const planetField = useField(
{ name: 'Mars' },
composePlugins(
errorsPlugin(),
scrollToErrorPlugin()
)
);
const handleSubmit = (event: SyntheticEvent) => {
event.preventDefault();
if (planetField.getInvalidFields().length === 0) {
// Submit the valid form value.
doSubmit(planetField.value);
} else {
// Scroll to the invalid field that is closest to the top left conrner of the document.
planetField.scrollToError(0, { behavior: 'smooth' });
}
};
useEffect(() => {
// Mark field as invalid.
planetField.at('name').addError('Too far away');
}, []);
return (
<form onSubmit={handleSubmit}>
<FieldRenderer field={planetField.at('name')}>
{nameField => (
<>
<input
// 🟡 Note that the input element ref is populated.
ref={nameField.ref}
value={nameField.value}
onChange={event => {
nameField.setValue(event.target.value);
}}
/>
{nameField.errors}
</>
)}
</FieldRenderer>
<button type="submit">
{'Submit'}
</button>
</form>
);
};