Skip to content
Home

Provider

Info
Demos
Properties
Events

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>