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.

Please use Form.Handler for application forms.

Demos

Data and callback events (and session store)

Code Editor
<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')}
  sessionStorageId="provider-example-1"
>
  <Flex.Stack>
    <Card>
      <Flex.Vertical 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">
          <Flex.Horizontal>
            <Field.String path="/list/0/itemText" label="Item text" />
            <Field.Number path="/list/0/itemNumber" label="Item number" />
          </Flex.Horizontal>
          <Flex.Horizontal>
            <Field.String path="/list/1/itemText" label="Item text" />
            <Field.Number path="/list/1/itemNumber" label="Item number" />
          </Flex.Horizontal>
        </div>
        <Form.ButtonRow>
          <Form.SubmitButton />
        </Form.ButtonRow>
      </Flex.Vertical>
    </Card>
  </Flex.Stack>
</DataContext.Provider>

Validation with Json Schema

Code Editor
<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')}
>
  <Flex.Stack>
    <Card>
      <Flex.Vertical 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">
          <Flex.Horizontal>
            <Field.String path="/list/0/itemText" label="Item text" />
            <Field.Number path="/list/0/itemNumber" label="Item number" />
          </Flex.Horizontal>
          <Flex.Horizontal>
            <Field.String path="/list/1/itemText" label="Item text" />
            <Field.Number path="/list/1/itemNumber" label="Item number" />
          </Flex.Horizontal>
        </div>
        <Form.ButtonRow>
          <Form.SubmitButton />
        </Form.ButtonRow>
      </Flex.Vertical>
    </Card>
  </Flex.Stack>
</DataContext.Provider>