Basic components

Field

The Field components renders value of the field.

<Field field="myField" />

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
defaultValue	Scalar The default value of the field.
format	undefined | (value: Scalar ) => ReactNode A function that formats the value as a ReactNode. The function is called with the value as the first argument.
isNonbearing	undefined | boolean If true, the field is non-bearing.
key	undefined | Key | null The key of the field. If the key is not specified, the key is generated from the field name.
onBeforeUpdate	undefined | (value: Scala}) => Scalar A function that is called before the value is updated.
onInitialize	undefined | (value: Scalar) => Scalar A function that is called when the field is initialized.
onUpdate	undefined | (value: Scalar) => Scalar A function that is called when the value is updated.

Text field

The TextField component renders a text field. The text field is used for basic string editing and has no rich text editing capabilities.

Component - simple

<TextField field="name" label="Name" />

Component - advanced

<TextField

field="name"

label="Name"

allowNewlines={true}

/>

API schema

export class Author {

name = def.stringColumn()

}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
about	undefined | string A description of the field. The description is displayed in the tooltip.
accessKey	undefined | string The access key of the field used to setup keyboard shortcut for the field. More info: MDN Access Key
autoFocus	boolean Whether the field should be focused on mount. The last field with autoFocus property set to true will be focused, If there are multiple ones.
allowNewlines	undefined | boolean If true, the field allows newlines.
description	ReactNode The description for the field.

Text area field

The TextAreaField component renders a text area field. The text field is used for basic string editing and has no rich text editing capabilities.

<TextAreaField field="content" label="Content" />

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required

Rich text field

The RichTextField component renders a rich text field. The text field is used for rich text editing.

Component - simple

<RichTextField field="content" label="Content" />

Component - advanced

<RichTextField

field="content"

label="Content"

inlineButtons={[

[

RichEditor.buttons.italic,

RichEditor.buttons.underline,

RichEditor.buttons.strikeThrough,

],

]}

/>

Component displays only italic, underline and strike through buttons in format text option.

API schema

export class Article {

content = def.stringColumn()

}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required
inlineButtons	undefined | ToolbarButtonSpec[] | ToolbarButtonSpec[][] Buttons to be displayed in the inline toolbar.

Date field

The DateField component renders date input for editing date.

Component

<DateField field="birthday" label="Birthday" />

API schema

export class User {

birthday = def.dateColumn()

}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required

Date & Time field

The DateTimeField component renders a date&time field for editing date and time.

Component

<DateTimeField field="startAt" label="Event start" />

API schema

export class Event {

startAt = def.dateTimeColumn()

}

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
label	ReactNode The label for the field. Required

Field View

The FieldView component renders a field value.

<FieldView

field="startAt"

label="Event start"

render={(filedAccessor) => <>{fieldAccessor.value}</>}

/>

Props

Prop	Description
field	string The name of the column in Contember schema where to store data. Required
render	(FieldAccessor) => ReactNode A function that is called to render the field. Required
key	undefined | Key | null The key of the field. If the key is not specified, the key is generated from the field name.
fallbackIfUnpersisted	ReactNode A fallback component that is rendered when the component is not persisted.