#Create your own component

Eufemia Forms contains of helper fields and tools so you can declaratively create interactive form components that flawlessly integrates between existing data and your custom form components.

import {
  DataContext,
  Field,
  FieldBlock,
  FieldGroup,
  Value,
  ValueBlock,
  Visibility,
  useField,
  useValue,
} from '@dnb/eufemia/extensions/forms'

Here is a first example on how to compose your own component:

const MyComponent = (props) => {
  const { value } = useField(props)
  return (
    <FieldGroup warning={value.warning}>
      <Layout.Row>
        <Field.String {...value.text} />
        <Field.Number {...value.number} />
      </Layout.Row>
    </FieldGroup>
  )
}
render(
  <DataContext.Provider
    data={{
      myComponent: {
        warning: 'Show one warning',
        text: {
          label: 'String field',
          value: 'Some value',
        },
        number: {
          label: 'Number field',
          value: '123',
        },
      },
    }}
  >
    <MyComponent path="/myComponent" />
  </DataContext.Provider>,
)

#Components

#DataContext

DataContext interweaves your data-set with your form fields.

#Field

Field for interactive data driven components.

#FieldBlock

FieldBlock is the base component for receiving user input where the target data is of type string.

#FieldGroup

FieldGroup you can group several components and its error states to compose one single component.

#Value

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

#ValueBlock

ValueBlock is a reusable wrapper component that can be used to easily create custom Value-components that will display in the same way as other Value-components.

#Hooks

#useField

The useField hook standardize handling of the value flow for a single field. It holds error state, hides it while the field is in focus, connects to surrounding DataContext (if present) and other things that all field components needs to do. By implementing custom field components and passing the received props (extending FieldProps) through useField, all these features work the same way as other field components, and you only need to implement the specific unique features of that field.

#useValue

The useValue hook standardize handling of the value flow for a single value. It connects to surrounding DataContext (if present) and other things that all value components needs to do. By implementing custom value components and passing the received props (extending ValueProps) through useValue, all these features work the same way as other value components, and you only need to implement the specific unique features of that component.