onView()

This event handler runs when a specific element becomes visible on the page.

Overview

This is a <Feathery.Form> prop and callback function to run custom logic when elements, specified with its sibling onViewElements prop, enter or leave the viewport. It's called once per specified element. This function can be asynchronous.

Usage

You can use onView to log or update form state when element visibility changes. The function takes a single Context object that provides form-related state and handlers.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', '[e-mail]');

  // Show the `onboarding` Feathery form
  return <Form
    formName='onboarding'
    onViewElements={['field-id']}
    // Custom form step onView logic
    onView={(context) => {
      const { elementId, isVisible } = context.visibilityStatus;
      if (elementId === 'field-id' && isVisible]) {
          importantTextIsVisible();
      }
    }}
  />
}

Context API

Key	Type	Description
Form Context		Consistently available form state and functions
visibilityStatus	object	Reports the visibility status of elements specified in onViewElements. Shape is { elementId: string, isVisible: boolean }.