Currency

Reference

• The Currency component provides a specialized input field for entering currency values.
• It ensures that only numeric input is allowed and optionally supports decimal values.

Props

The Currency component accepts the following props:

1. allowDecimal (optional, default: true):

   • A boolean that determines whether decimal values are allowed in the input.
   • If true, users can enter decimal numbers (e.g., 123.45).
   • If false, only whole numbers are allowed (e.g., 123).

2. value (optional):

   • The current value of the input field.
   • This is a controlled prop, meaning the parent component manages the state of the input value.

3. onEdit (optional):

   • A callback function triggered whenever the input value changes.
   • It receives the updated value as an argument.

4. onFocusOut (optional):

   • A callback function triggered when the input loses focus (blur event).
   • Useful for validating or formatting the value after the user finishes editing.

5. placeholder (optional):

   • A string that specifies placeholder text to display when the input is empty.

6. style (optional):

   • An object containing custom styles to apply to the TextBox component.

7. disabled (optional):

   • A boolean that determines whether the input field is disabled.
   • If true, the input is read-only and cannot be interacted with.

Usage Example

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { Currency } = protrakComponents;
  const [value, setValue] = useState('');

  const handleEdit = (newValue) => {
    setValue(newValue);
  };

  return (
    <Currency
      value={value}
      onEdit={handleEdit}
      placeholder="Enter amount"
    />
  );
};

UI