DOM reference plugin for Roqueform

Associates Roqueform fields with DOM elements.

npm install --save-prod @roqueform/ref-plugin

Overview

🔎 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.

import { FieldRenderer, useField } from '@roqueform/react';
import { refPlugin } from '@roqueform/ref-plugin';

export const App = () => {
  const planetField = useField({ name: 'Venus' }, refPlugin());

  return (
    <FieldRenderer field={planetField.at('name')}>
      {nameField => (
        <input
          ref={nameField.ref}
          value={nameField.value}
          onChange={event => {
            nameField.setValue(event.target.value);
          }}
        />
      )}
    </FieldRenderer>
  );
};

Access an element referenced by a field:

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.

planetField.at('name').focus();

planetField.at('name').isFocused // ⮕ true

Scroll to an element:

planetField.at('name').scrollIntoView({ behavior: 'smooth' });