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.
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
.
$ npm install react-hook-form rhfa-blueprint @blueprintjs/core @blueprintjs/icons @blueprintjs/select --save
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}
/>
Appart from min
and max
, you should setup step
and labelStep
:
something: {
type: 'range',
min: 10,
max: 90,
step: 5,
labelStep: 20,
defaultValue: 50
}
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()
.
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.
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)' }
},
Let's you wrap your input as rhfa-blueprint
would. Signature is in source code
Changes usual rhfa-blueprint
props to those of InputGroup
from blueprintjs
.