Associates Roqueform fields with DOM elements.
npm install @roqueform/ref-pluginAssociates Roqueform fields with DOM elements.
``sh`
npm install --save-prod @roqueform/ref-plugin
š API documentation is available here.
This plugin doesn't require any rendering framework. To simplify the usage example, we're going to use
the React integration.
`tsx
import { FieldRenderer, useField } from '@roqueform/react';
import { refPlugin } from '@roqueform/ref-plugin';
export const App = () => {
const planetField = useField({ name: 'Venus' }, refPlugin());
return (
{nameField => (
value={nameField.value}
onChange={event => {
nameField.setValue(event.target.value);
}}
/>
)}
);
};
`
Access an element referenced by a field:
`ts`
planetField.at('name').element // ā® HTMLInputElement
Focus and blur an element referenced by a field. If a field doesn't have an associated element this is a no-op.
`ts
planetField.at('name').focus();
planetField.at('name').isFocused // ā® true
`
Scroll to an element:
`ts``
planetField.at('name').scrollIntoView({ behavior: 'smooth' });