Skip to content
Home

Provider

Info
Demos
Properties
Events

Description

DataContext.Provider is the context provider that has to wrap the features if components of Field and Value is to be used with a common source instead of distributing values and events individually.

Demos

Data and callback events

<DataContext.Provider

  data={testdata}

  onChange={(data) => console.log('onChange', data)}

  onPathChange={(path, value) => console.log('onPathChange', path, value)}

  onSubmit={(data) => console.log('onSubmit', data)}

  onSubmitRequest={() => console.log('onSubmitRequest')}

>

  <Layout.Section>

    <Layout.Card>

      <Layout.Column divider="line" spacing="small">

        <Field.String

          path="/requiredString"

          label="Required string"

          required

        />

        <Field.String path="/hmm" label="Invalid path" />

        <Field.String path="/string" label="String value" />

        <Field.String path="/string" label="String value (copy)" />

        <Field.Number path="/number" label="Number value" />

        <Field.String path="/number" label="Number with Field.String" />

        <Field.Boolean

          path="/boolean"

          label="Boolean - Checkbox"

          variant="checkbox"

        />

        <Field.Boolean

          path="/boolean"

          label="Boolean - Toggle"

          variant="button"

        />

        <div>

          <Field.String path="/nested/nestedText" label="Nested text" />

          <Field.Number

            path="/nested/nestedNumber"

            label="Nested number (minimum 50)"

            minimum={50}

          />

        </div>

        <div className="hmm">

          <Layout.Row>

            <Field.String path="/list/0/itemText" label="Item text" />

            <Field.Number path="/list/0/itemNumber" label="Item number" />

          </Layout.Row>

          <Layout.Row>

            <Field.String path="/list/1/itemText" label="Item text" />

            <Field.Number path="/list/1/itemNumber" label="Item number" />

          </Layout.Row>

        </div>

        <Layout.ButtonRow>

          <DataContext.SubmitButton />

        </Layout.ButtonRow>

      </Layout.Column>

    </Layout.Card>

  </Layout.Section>

</DataContext.Provider>

Validation with Json Schema

<DataContext.Provider

  data={testdata}

  schema={TestdataSchema}

  onChange={(data) => console.log('onChange', data)}

  onPathChange={(path, value) => console.log('onPathChange', path, value)}

  onSubmit={(data) => console.log('onSubmit', data)}

  onSubmitRequest={() => console.log('onSubmitRequest')}

>

  <Layout.Section>

    <Layout.Card>

      <Layout.Column divider="line" spacing="small">

        <Field.String path="/requiredString" label="Required string" />

        <Field.String path="/hmm" label="Invalid path" />

        <Field.String path="/string" label="String value" />

        <Field.String path="/string" label="String value (copy)" />

        <Field.Number path="/number" label="Number value" />

        <Field.String path="/number" label="Number with Field.String" />

        <Field.Boolean

          path="/boolean"

          label="Boolean - Checkbox"

          variant="checkbox"

        />

        <Field.Boolean

          path="/boolean"

          label="Boolean - Toggle"

          variant="button"

        />

        <div>

          <Field.String path="/nested/nestedText" label="Nested text" />

          <Field.Number

            path="/nested/nestedNumber"

            label="Nested number"

          />

        </div>

        <div className="hmm">

          <Layout.Row>

            <Field.String path="/list/0/itemText" label="Item text" />

            <Field.Number path="/list/0/itemNumber" label="Item number" />

          </Layout.Row>

          <Layout.Row>

            <Field.String path="/list/1/itemText" label="Item text" />

            <Field.Number path="/list/1/itemNumber" label="Item number" />

          </Layout.Row>

        </div>

        <Layout.ButtonRow>

          <DataContext.SubmitButton />

        </Layout.ButtonRow>

      </Layout.Column>

    </Layout.Card>

  </Layout.Section>

</DataContext.Provider>

Properties

PropertyTypeDescription
dataobject(required) Source data.
schemaobject(optional) JSON Schema for validation of the data set.
scrollTopOnSubmitboolean(optional) True for the UI to scroll to the top of the page when data is submitted.
childrenReact.Node(required) Contents.

Events

EventDescription
onChange(optional) Will be called when a value of any input component inside was changed by the user, with the data set (including the changed value) as argument.
onPathChange(optional) Will be called when a value of any input component inside was changed by the user, with the path (JSON Pointer) and new value as arguments.
onSubmit(optional) Will be called when the user submit the form (i.e by clicking a SubmitButton component inside), with the data set as argument.
onSubmitRequest(optional) Will be called when the user tries to submit, but errors stop the data from being submitted.