Skip to content
Quickly render bootstrap styled react hook forms using a schema file.
TypeScript CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
.vscode
src
tests
.all-contributorsrc
.codeclimate.yml
.eslintrc.js
.gitignore
.npmignore
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
jest.config.js
jest.setup.ts
package-lock.json
package.json
rollup.config.js
rollup.min.config.js
tsconfig.json

README.md

react-breeze-form

Build Status codecov Maintainability All Contributors semantic-release

Quickly render bootstrap styled react hook forms using a schema file.

Notice

Currently under development

Versions 1.x.xx are under development, and may have breaking changes

Required peer dependencies

Quick example

Convert a configuration object such as:

const form = [
  {
    name: "intro",
    type: (
      <div className="my-3" style={{ color: "green", fontWeight: "bold" }}>
        Quick example / Ejemplo rápido
      </div>
    )
  },
  {
    name: "name",
    type: "input",
    inputType: "text",
    header: {
      className: "input-header",
      id: "full-name-header",
      text: "common:fullName"
    },
    inputs: [
      {
        className: "mt-4",
        inputType: "text",
        name: "firstName",
        placeholder: "common:firstName",
        required: "common:requiredField",
        type: "input",
        validate: (value: any) =>
          !value.includes("test") || "common:invalidName"
      },
      {
        className: "mt-4",
        inputType: "text",
        name: "lasttName",
        placeholder: "common:lastName",
        required: "common:requiredField",
        type: "input"
      }
    ]
  },
  {
    name: "zip-language",
    type: "input",
    inputType: "text",
    inputs: [
      {
        name: "zip",
        type: "input",
        inputType: "text",
        className: "mt-2",
        placeholder: "common:zip"
      },
      {
        name: "language",
        type: "singleselect",
        className: "select-double mt-2",
        inputType: "select",
        placeholder: "common:language",
        options: [
          { label: "common:english", value: "en" },
          { label: "common:spanish", value: "es" }
        ]
      }
    ]
  },
  {
    name: "submit",
    type: "submitbtn",
    col: 8,
    placeholder: "common:save"
  }
];

... into a full form component:

function App() {
  return (
    <div className="App">
        <Form onSubmit={(data) => console.log("Data", data)} 
              form={form} />
    </div>
  );
}

Interactive demo

Demo: CodeSandBox

All configuration options

All possible configuration options are defined in the FormConfig interface file

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.