<IfFieldVisitation>

This component allows you to conditionally render based on a field being visited.

By default, fields are visited when blurred; unless they're checkboxes, then they're blurred by default.

If you want to conditionally render based on the value of a checkbox, use IfFieldValue instead.

Props

Prop Name

Prop Type

Description

children

Node

Any number of components.

fallback

Node

Fallback component that displays when.

This will change in a future version.

name

String

The base field name without a /.

import {
  IfFieldVisitation,
  OneForm,
} from '@oneform/react'

const ConditionalFieldVisitationExample = () => (
  <OneForm
    values={{
      firstName: '',
    }}
  >
    <div>
      <IfFieldVisitation name="firstName">
        That's a nice name.
      </IfFieldVisitation>
    </div>
  </OneForm>
)

export default ConditionalFieldVisitationExample 

When to use?

This is probably most useful when:

  • You have a flow of information and want to limit showing new fields until other fields have been visited.

Last updated