Nanoscale Parts Manufacturing
Wondering what’s next for npm?Check out our public roadmap! »

rhfa-blueprint

1.0.2 • Public • Published

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.

Installation

$ npm install react-hook-form rhfa-blueprint @blueprint/core @blueprint/icons @blueprint/table --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
  }

Its recommended to put the Autoform component in its own module. This will let you opt in for the array icons.

    import { Autoform as RHFAutoform } from 'rhfa-blueprint'
    import { Icon } from '@blueprintjs/icons'
 
    const skinAdd = {
      addGlyph: {
        render: () =>
          <Icon icon="add" />
      },
      removeGlyph: {
        render: () =>
          <Icon icon="remove" />
      }
    }
 
    export const Autoform = (props) =>
      <RHFAutoform
        schema={client}
        onSubmit={onSubmit}
        skinOverride={skinAdd}
      />

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().

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)' }
  },

Documentation

Install

npm i rhfa-blueprint

DownloadsWeekly Downloads

3

Version

1.0.2

License

MIT

Unpacked Size

35.2 kB

Total Files

22

Last publish

Collaborators

  • avatar