Custom Logic

Start of documentation content

Allows custom conditional rules in JavaScript with the onLogic prop.

Intro

For technical reasons usage of Formally JSX has some constraints. These include being unable to conditionally render Formally JSX components.

Any <Logic> (formerly <Conditional>) or <Page rules={...}> can have additional custom logic provided. The function can be sync or async, and it returns undefined, true, or false.

Use of onLogic

The onLogic callback is called for each field. In a Repeater it will be called on each repeated field.

You can return either...

  • Return true: evaluate true, and we have enough form data to evaluate answers
  • Return false: evaluate false, and we have enough form data to evaluate answers
  • Return undefined: evaluate undefined to show that there's not enough form data to evaluate answers, so whether it would pass is ambiguous
import { Formally } from 'formally';

<Formally
  onLogic={async ({
    conditionResult,
    formallyData,
    valuesToBeTested,
    allValues,
    rules,
    locale,
  }) => {
    // your custom logic goes here...
  }}
/>;