install:

npx yalc add vital-camera && npx yalc link vital-camera && yarn install && yarn build && yarn dev
yarn add @workchain/postal-code

add to api schema.json:

{
  "attributes": {
    "price": {
      "type": "integer",
    },
    "quantity": {
      "type": "integer",
    },
    "totalAmount": {
      "type": "customField",
      "customField": "plugin::vital-camera.total",
      "options": {
        "formula": "price * quantity",
      },
    },
    "postalCode": {
      "type": "customField",
      "customField": "plugin::vital-camera.postal",
      "maxLength": 8,
      "regex": "^\\d{3}-?\\d{4}$",
      "required": true,
    },
    "prefecture": {
      "type": "customField",
      "customField": "plugin::vital-camera.prefecture",
      "maxLength": 40,
      "required": true,
    },
    "address1": {
      "type": "string",
      "maxLength": 40,
    },
  },
}

Usage Guide for Custom FormulaField in Strapi

Purpose

FormulaField is a custom React component designed to display a calculated field based on a user-defined formula expression. It evaluates the formula using variables from the current form and formats the resulting number accordingly.

Main Props

| Prop | Description | Type | Required | | ------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- | --- | | attribute | Contains options with the formula string and optional number formatting options | { options?: { formula?: string; format?: Intl.NumberFormatOptions | string } } | Yes | | name | Name of the field | string | Yes | | onChange | Callback function called when the field value changes (usually unused because field is read-only) | (e: { target: { name: string; value: any } }) => void | Yes | | value | Current value (for controlled component usage) | any | No | | label | Display label for the field | string | No | | description | Additional description for the field | { defaultMessage: string } | No | | disabled | Disables the field (note: this field is always read-only) | boolean | No | | required | Makes field required | boolean | No | | error | Error message to display | string | No | | placeholder | Placeholder text shown when field is empty | string | No |

Formula Usage

• The formula is defined in attribute.options.formula as a string (e.g. "price * quantity + tax").
• Variables inside the formula must correspond to existing fields in the current form, such as price, quantity, or tax.
• Supported operators: +, -, *, /, and parentheses (, ).
• The formula is evaluated automatically whenever any related form field changes.
• The numeric result of the formula is formatted according to the Intl.NumberFormat options provided in attribute.options.format.

Usage Example

Suppose you have a content type with fields price, quantity, and want a total field that calculates price * quantity automatically: