# rhfa-blueprint

> Generate automatic forms following a schema using Blueprint

Latest version **1.2.5** (published 2024-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install rhfa-blueprint
pnpm add rhfa-blueprint
yarn add rhfa-blueprint
bun add rhfa-blueprint
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.5 |
| Published | 2024-06-01 |
| First published | 2020-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 52.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | David González |
| Maintainers | braben |
| Keywords | react, reactjs, hooks, react-hook-form, form, validators, validation, blueprint |

## Links

- npm: https://www.npmjs.com/package/rhfa-blueprint
- Repository: https://github.com/dgonz64/rhfa-blueprint
- Homepage: https://github.com/dgonz64/rhfa-blueprint#readme
- Issues: https://github.com/dgonz64/rhfa-blueprint/issues
- npm.io page: https://npm.io/package/rhfa-blueprint

## Dependencies (1)

- [react-hook-form-auto](https://npm.io/package/react-hook-form-auto.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.5 (latest) — 2024-06-01
- 1.2.4 — 2022-07-11
- 1.2.3 — 2022-06-11
- 1.2.2 — 2022-06-03
- 1.2.1 — 2022-05-21
- 1.2.0 — 2022-05-18
- 1.1.4 — 2022-04-17
- 1.1.3 — 2021-07-31
- 1.1.2 — 2021-07-31
- 1.1.1 — 2021-07-25
- 1.0.2 — 2020-07-22
- 1.0.1 — 2020-07-22
- 1.0.0 — 2020-07-21

## README

# rhfa-blueprint

This library allows your React application to automatically generate forms using [ReactHookForm](https://react-hook-form.com/) that are redered by [Blueprint](https://blueprintjs.com/). The form and validations are generated following a schema inspired by [SimpleSchema](https://github.com/aldeed/simple-schema-js).

## 1.2.0 Update

Selects are now [blueprint Select](https://blueprintjs.com/docs/#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`:

```javascript
    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`:

```javascript
  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`.

```javascript
    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:

```javascript
    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:

```javascript
  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](src/components/GroupAdaptor.jsx)

#### InputGroupAdaptor

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

## [Base documentation](https://github.com/dgonz64/react-hook-form-auto)

---
_Source: https://npm.io/package/rhfa-blueprint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._