Extensions#

Description#

Eufemia extensions are reusable parts that do not fit naturally into a component or element but rather have the nature of being an extended solution of Eufemia. There are several great reasons behind opting for having extensions separated:

Modularity and Reusability: Separating extensions promotes a modular design and minimizes code duplication. It enables the creation of subsystems that are tightly integrated with their respective domains, such as a Forms extension that seamlessly connects to its associated data and functionality.
Decoupled Complexity: Extensions often add specific or advanced functionality that may not be relevant for all use cases. Keeping them separate prevents the core components or elements from becoming overly complex.
Customizability: Extensions allow for easier customization and flexibility. Developers can pick and choose only the extensions they need, tailoring the solution to their specific requirements.
Improved Maintainability: Isolating extensions simplifies maintenance and updates. Changes to an extension do not risk introducing bugs in the core components, making the ecosystem more stable.
Clear Separation of Concerns: By defining extensions as independent solutions, it’s easier to distinguish between core functionality and optional features (handled by extensions).

Import extensions#

import { ... } from '@dnb/eufemia/extensions'

Import extensions styles#

The styles for extensions are not a part of the default styles, so you have to import them explicitly.

import '@dnb/eufemia/style/themes/ui/extensions'

Available Extensions#

Connectors #

Connectors are an opt-in way to extend the functionality of a form. They can be used to add features like API calls for autofill, validation, and more.

Form.Appearance #

Form.Appearance is a provider for theming form fields.

Form.ButtonRow #

Form.ButtonRow is a wrapper for horizontally separated buttons.

Form.Card #

Form.Card is a wrapper for the Card component to make it easier to use inside a form.

Form.Handler #

The Form.Handler is the root component of your form. It provides an HTML form element and handles the form data.

Form.InfoOverlay #

Form.InfoOverlay is used to display an informational message that fully covers the available space.

Form.Isolation #

Form.Isolation lets you isolate parts of your form so data and validations are not shared between the Form.Handler until you want to.

Form.MainHeading #

Form.MainHeading is a standardized main heading for sections, ensuring default layout, spacing etc.

Form.Outlet #

Form.Outlet lets you render fields and form components in another part of the tree while linking them to a specific Form.Handler by id.

Form.Section.EditContainer #

Form.Section.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

Form.Section.Toolbar #

Form.Section.Toolbar is a helper component to be used within an Form.Section.ViewContainer and Form.Section.EditContainer.

Form.Section.ViewContainer #

Form.Section.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

Form.Section #

Form.Section lets you compose blocks of fields and values to be reused in different contexts.

Form.SubHeading #

Form.SubHeading is a standardized sub heading for sections, ensuring default layout, spacing etc.

Form.SubmitButton #

Form.SubmitButton connects to the Form.Handler to submit the active state of the internal DataContext, triggering onSubmit.

Form.SubmitConfirmation #

Form.SubmitConfirmation can be used to prevent the Form.Handler from submitting, and makes it possible to show a confirmation dialog in different scenarios.

Form.SubmitIndicator #

Form.SubmitIndicator lets you show an indicator while async form operations are performed.

Form.Visibility #

Form.Visibility makes it possible to hide components and elements on the screen based on the dynamic state of data.

Form.clearData #

Form.clearData lets you clear the data of a form.

Form.getData #

Form.getData lets you access your form data outside of the form context.

Form.setData #

Form.setData lets you set or modify your form data outside of the form context.

Form.useData #

Form.useData lets you access or modify your form data outside of the form context within your application.

Form.useDataValue #

Form.useDataValue lets you render one form data value with a path-scoped subscription.

Form.useSnapshot #

Form.useSnapshot lets you store data snapshots of your form data, either inside or outside of the form context.

Form.useSubmit #

Form.useSubmit lets you trigger form submit from outside the form element, e.g. when the submit button is in a modal footer or toolbar.

Form.useTranslation #

Form.useTranslation is a hook that returns the translations for the current locale.

Form.useValidation #

Form.useValidation lets you monitor and modify field status or your form errors outside of the context.

Form #

Form provides the main forms-helpers including data provider and event handling.

Iterate.AnimatedContainer #

Iterate.AnimatedContainer can be used to animate items when they are added or removed.

Iterate.Array #

Iterate.Array works in many ways similar to field-components. It has a value-property that can receive an array or you can give it a path if you want it to retrieve an array from a surrounding DataContext. All children components of Iterate.Array are rendered once per item the array-value consists of.

Iterate.Count #

Iterate.Count is a helper component / function that returns the count of a data array or object.

Iterate.EditContainer #

Iterate.EditContainer enables users to toggle (with animation) the content of each item between the view and edit container.

Iterate.ItemNo #

Iterate.ItemNo is a helper component that can be used to render the current item number (index) in a given string.

Iterate.PushButton #

Iterate.PushButton builds on top of the same data flow logic as field components, but the only thing it changes in the value it receives or retrieves from source data is adding a new item to the array.

Iterate.PushContainer #

Iterate.PushContainer enables users to create a new item in the array.

Iterate.RemoveButton #

Iterate.RemoveButton connects to the array of a surrounding Iterate.Array and removes the item when clicked.

Iterate.Toolbar #

Iterate.Toolbar is a helper component to be used within an Iterate.AnimatedContainer to add a toolbar to each item in the array.

Iterate.ViewContainer #

Iterate.ViewContainer enables users to toggle (with animation) the content of each item between the view and edit container.

Iterate.Visibility #

The Iterate.Visibility component allows you to conditionally display content based on relative paths (itemPath) within an Iterate.Array component.

Iterate #

Iterate contains components and functionality for traversing values and parts of data sets such as arrays, which contain a varying number of elements where the number of components on the screen depends on how many elements the data consists of.

Value.Address #

Value.Address is a wrapper component for displaying string values, with user experience tailored for postal and street addresses.

Value.ArraySelection #

Value.ArraySelection is a wrapper component for displaying string values, with user experience tailored for an array of selected values.

Value.BankAccountNumber #

Value.BankAccountNumber is a wrapper component for displaying string values, with user experience tailored for bank account number values.

Value.Boolean #

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

Value.Composition #

Value.Composition combines two or more Value.* components into one.

Value.Currency #

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

Value.Date #

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

Value.DateOfBirth #

Value.DateOfBirth is a wrapper component for displaying string values, with user experience tailored for date of birth values.

Value.Email #

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

Value.MultiSelection #

Value.MultiSelection displays the selected values from a Field.MultiSelection as a formatted list of titles.

Value.Name #

Value.Name is a wrapper component for displaying string values, with user experience tailored for personal, like first and last name and company names.

Value.NationalIdentityNumber #

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

Value.Number #

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

Value.OrganizationNumber #

Value.OrganizationNumber is a wrapper component for displaying string values, with user experience tailored for organization number values.

Value.PhoneNumber #

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

Value.PostalCodeAndCity #

Value.PostalCodeAndCity is a wrapper component for displaying string values, with user experience tailored for Norwegian postal code and city values.

Value.Provider #

The Value.Provider lets you pass generic properties to all nested Value.* components.

Value.SelectCountry #

Value.SelectCountry will render the selected country.

Value.SelectCurrency #

Value.SelectCurrency will render the selected currency.

Value.Selection #

Value.Selection is a component for displaying a string value based on a user selection.

Value.String #

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

Value.SummaryList #

Value.SummaryList uses definition lists to semantically make content consumable for screen readers.

Value.Time #

Value.Time is a wrapper component for displaying string values, with user experience tailored for time values.

Value.Upload #

Value.Upload is a value component for displaying a list of files.

Value #

Value components can be used to summarize any kind of data.

Wizard.Buttons #

Wizard.Buttons is a combination of PreviousButton and NextButton for navigating between steps/pages.

Wizard.Container #

The Wizard.Container is a container component for multi-page forms including a step indicator.

Wizard.EditButton #

Wizard.EditButton is a button to be placed in a summary step.

Wizard.NextButton #

Wizard.NextButton connects to the Wizard.Context to move the user to the next step when clicked.

Wizard.PreviousButton #

Wizard.PreviousButton connects to the Wizard.Context to move the user to the previous step when clicked.

Wizard.Step #

Each step should be wrapped with a Wizard.Step component directly inside Wizard.Container.

Wizard.LocationHooks #

Is a set of React Hooks that lets you easily hook up your existing router in order to store the current step in the URL query string.

Wizard.useStep #

Wizard.useStep returns Wizard.Context parameters such as totalSteps, activeIndex or a setActiveIndex handler.

Wizard #

Wizard is a set of components for showing forms with a StepIndicator for navigation between several wizard. It also includes components for navigating between wizard.

What are fields?#

All features and APIs #

Field.ArraySelection #

Field.ArraySelection is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options.

Field.Boolean #

Field.Boolean is the base component for receiving user input where the target data is of type boolean.

Field.Composition #

Field.Composition is a component for when you create a field block that contains of several existing fields.

Field.MultiSelection #

Field.MultiSelection is a component for selecting between a fixed set of options using checkboxes or similar, that will produce a value in the form of an array containing the values of selected options. This field accepts structured data with objects containing value and title properties.