useFormattedProperties
useFormattedProperties formats source object properties for clean display in UI tables or description lists.
Features
- Start Case Conversion: Transforms
snake_caseorcamelCasekeys into human-readable labels (e.g.first_name→First Name). - Omit Keys: Removes specified internal or sensitive properties.
- Date Formatting: Processes specified date keys using a custom
dateFormatter. - Fallback String: Replaces
nullorundefinedvalues with a customizable fallback string (default:"N/A").
Usage Example
const rawUser = ref({
id: "usr_123",
first_name: "Alex",
created_at: "2026-03-15T09:45:00Z",
phone: null,
secret: "hidden"
})
const formatted = useFormattedProperties(rawUser, {
omitKeys: ["secret", "id"],
dateKeys: ["created_at"],
dateFormatter: (val) => new Date(val).toLocaleDateString(),
fallback: "Not Provided"
})
// Result: { "First Name": "Alex", "Created At": "3/15/2026", "Phone": "Not Provided" }