rhfa-blueprint

This library allows your React application to automatically generate forms using ReactHookForm that are redered by Blueprint. The form and validations are generated following a schema inspired by SimpleSchema.

1.2.0 Update

Selects are now blueprint Select. That means you need the addon. Just add @blueprintjs/select to your project.

$ npm install @blueprintjs/select --save

You can use HTMLSelect with htmlSelect field schema's type.

Installation

$ npm install react-hook-form rhfa-blueprint @blueprintjs/core @blueprintjs/icons @blueprintjs/select --save

Usage

Just like react-hook-form-auto except you import rhfa-blueprint:

    import { createSchema, Autoform } from 'rhfa-blueprint'

    export const client = createSchema('client', {
      name: {
        type: 'string',
        required: true,
        max: 32
      },
      age: {
        type: 'number'
      }
    })

    const MyForm = ({ onSubmit }) =>
      <Autoform
        schema={client}
        onSubmit={onSubmit}
      />

Specific schema attributes for Blueprint

type = 'range'

Appart from min and max, you should setup step and labelStep:

  something: {
    type: 'range',
    min: 10,
    max: 90,
    step: 5,
    labelStep: 20,
    defaultValue: 50
  }

Helper text

You can specify helperText in the schema and it will be printed as Blueprint's helperText.

    import { createSchema } from 'rhfa-blueprint'

    const smt = createSchema('something', {
      name: {
        type: 'string',
        helperText: tr('models.name.helper')
      }
    })

You can set the text directly too, without using tr().

Select

There are additional props for the field schema:

    import { createSchema } from 'rhfa-blueprint'

    const selectable = createSchema('selectable', {
      name: {
        type: 'select',
        options: [
          { value: 'a', label: 'A', icon: 'build' },
          { value: 'b', label: 'B', icon: 'circle' },
          { value: 'c', label: 'C', icon: 'code' },
          { value: 'd', label: 'D', icon: 'cut' }
        ],
        addDefault: false,
        addClear: true,
        clearLabel: tr('some.label.that.says.clear'),
        clearIcon: 'clean',
        showValues: true,
        multiselect: true
      }
    })

You can add icons to the options if you are specifying them in object format like in this example.

• addDefault is not needed here because button already prints the placeholder.
• addClear will add the clear option. Only for single value selects.
• clearLabel will force a label for the "clear selection" option (addClear)
• showValues will show values as option label (grayed)
• multiselect will return an array with the selected values. Icons are ignored.
• icon icon for the left side of the button.

Any other

This is just a reminder that you can set any property to wrapper or input:

  heads: {
    type: 'number',
    addInputProps: { leftIcon: 'person' },
    addWrapperProps: { labelInfo: '(batteries included)' }
  },

Exported wrappers

GroupAdaptor

Let's you wrap your input as rhfa-blueprint would. Signature is in source code

InputGroupAdaptor

Changes usual rhfa-blueprint props to those of InputGroup from blueprintjs.

Base documentation