#DataValue

#Value components

Many screens summarize values from the data set statically, such as a final screen where the user can review the data they have entered before submitting it to the bank. To make displaying such data easier, a number of Value components have been created. These function similarly as Input components. That is, they are data-driven, can be given value-props, or connected to a surrounding DataContext.Provider by pointing to the relevant value they are to display with a path-prop. They are also available with more functional variants for given types of data. Examples of Value components are:

#Creating custom value components

The useValue hook that is used in all existing value components is exported to make it possible to create custom value components that have the same properties and follow the same flow as the standard components, without the need to recreate all the basic state handling features.

#Components

#Base components

#String

DataValue.String is a base component for displaying values of the type `string`.

#Number

DataValue.Number is a base component for displaying values of the type `number`.

#Boolean

DataValue.Boolean is a base component for displaying values of the type `boolean`.

#Feature components

#Currency

DataValue.Currency is a wrapper component for displaying number values, with user experience tailored for currency values.

#Date

DataValue.Date is a wrapper component for displaying string values, with user experience tailored for date values.

#Email

DataValue.Email is a wrapper component for displaying string values, with user experience tailored for email values.

#FirstName

DataValue.FirstName is a wrapper component for displaying string values, with user experience tailored for first name values.

#LastName

DataValue.LastName is a wrapper component for displaying string values, with user experience tailored for last name values.

#NationalIdentityNumber

DataValue.NationalIdentityNumber is a wrapper component for displaying string values, with user experience tailored for national identity number values.

#PhoneNumber

DataValue.PhoneNumber is a wrapper component for displaying string values, with user experience tailored for phone number values.