# onView()

### Overview

This is a [\<Feathery.Form>](https://docs.feathery.io/develop/react/api-guide/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 <a href="#usage" id="usage"></a>

You can use `onView` to log or update form state when element visibility changes. The function takes a single [Context](#context-api) object that provides form-related state and handlers.

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

function App() {
  // Initialize Feathery
  init('SDKKey', 'bob@feathery.io');

  // Show the `aBcDeF` Feathery form
  return <Form
    formId='aBcDeF'
    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](https://docs.feathery.io/develop/context-api) |          | Consistently available form state and functions                                                                                |
|                      `visibilityStatus`                      | `object` | Reports the visibility status of elements specified in `onViewElements`. Shape is `{ elementId: string, isVisible: boolean }`. |