Skip to main content

IfFormValues

Conditional rendering based on form values. Shows or hides content when a condition function returns true.

Import​

function IfFormValues({
  children,
  check,
  form,
  setTo,
  resetTo,
  render,
  updateDebounce = 0,
}: {
  children: ReactNode;
  check: (values: IRValues, activeValues: IRValues) => boolean;
  form?: string;
  setTo?: IRValues;
  resetTo?: IRValues;
  render?: (values: IRValues) => ReactNode;
  updateDebounce?: number;
}): ReactElement | null

Signature​

function IfFormValues({
  children,
  check,
  form,
  setTo,
  resetTo,
  render,
  updateDebounce = 0,
}: {
  children: ReactNode;
  check: (values: Record<string, any>, activeValues: Record<string, any>) => boolean;
  form?: string;
  setTo?: Record<string, any>;
  resetTo?: Record<string, any>;
  render?: (values: Record<string, any>) => ReactNode;
  updateDebounce?: number;
}): ReactElement | null

Props​

PropTypeRequiredDescription
childrenReactNodeYesContent to render when condition is true
check(values, activeValues) => booleanYesCondition function that receives form values
formstringNoForm name. Auto-detected from context if not provided
setToIRValuesNoValues to set when condition becomes true
resetToIRValuesNoValues to set when condition becomes false
render(values) => ReactNodeNoAlternative to children - render prop with values
updateDebouncenumberNoDebounce delay in ms for setTo/resetTo (default: 0)

Usage Example​

Basic Conditional Rendering​

import { Form, Field, IfFormValues } from 'efx-forms';

const Input = ({ label, ...props }) => (
  <div>
    <label>{label}</label>
    <input {...props} />
  </div>
);

const ConditionalForm = () => (
  <Form name="conditional-form" onSubmit={console.log}>
    <Field name="age" Field={Input} label="Age" type="number" />
    
    {/* Show when age >= 18 */}
    <IfFormValues check={({ age }) => age >= 18}>
      <div className="adult-content">
        <Field name="license" Field={Input} label="Driver's License" />
      </div>
    </IfFormValues>
    
    <button type="submit">Submit</button>
  </Form>
);

Auto-Fill Values on Show​

import { Form, Field, IfFormValues } from 'efx-forms';

const AutoFillForm = () => (
  <Form name="auto-fill-form" onSubmit={console.log}>
    <Field name="country" Field={Input} label="Country" />
    
    {/* Auto-fill state when country is USA */}
    <IfFormValues
      check={({ country }) => country === 'USA'}
      setTo={{ state: 'California', zip: '90210' }}
      resetTo={{ state: '', zip: '' }}
    >
      <div>
        <Field name="state" Field={Input} label="State" />
        <Field name="zip" Field={Input} label="ZIP" />
      </div>
    </IfFormValues>
  </Form>
);

Using Render Prop​

import { Form, IfFormValues } from 'efx-forms';

const ValueDisplay = () => (
  <Form name="display-form" onSubmit={console.log}>
    <IfFormValues
      check={({ showDebug }) => showDebug}
      render={(values) => (
        <pre className="debug">{JSON.stringify(values, null, 2)}</pre>
      )}
    />
  </Form>
);

Debounced Updates​

import { Form, Field, IfFormValues } from 'efx-forms';

const DebouncedForm = () => (
  <Form name="debounced-form" onSubmit={console.log}>
    <Field name="enableExtra" Field={Checkbox} label="Enable Extra Fields" />
    
    <IfFormValues
      check={({ enableExtra }) => enableExtra}
      setTo={{ extra1: 'default1', extra2: 'default2' }}
      updateDebounce={500} // Wait 500ms before setting values
    >
      <div>
        <Field name="extra1" Field={Input} />
        <Field name="extra2" Field={Input} />
      </div>
    </IfFormValues>
  </Form>
);

When to Use​

Use IfFormValues when you need:

  • Show/hide content based on form values
  • Auto-fill or reset fields based on conditions
  • Conditional rendering with access to all form values
  • Debounced value updates