#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,
  useDataValue,
} from '@dnb/eufemia/extensions/forms'

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

const MyComponent = (props) => {
  const { value } = useDataValue(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

#useDataValue

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