diff --git a/README.md b/README.md index 347814e..8c9c9bf 100644 --- a/README.md +++ b/README.md @@ -11,16 +11,26 @@ Quickly render bootstrap styled react hook forms using a schema file. ## Notice **Currently under development** ``` -Versions 1.x.xx are under heavy development, and may have breaking changes. +Versions 1.x.xx are under development, and may have breaking changes ``` +## Required peer dependencies +* [react-hook-form](https://www.npmjs.com/package/react-hook-form) +* [react-i18next](https://www.npmjs.com/package/react-i18next) +* [react-select](https://www.npmjs.com/package/react-select) +* [reactstrap](https://www.npmjs.com/package/reactstrap) + ## Quick example Convert a configuration object such as: ```jsx const form = [ { name: "intro", - type:
This is a quick example
+ type: ( +
+ Quick example / Ejemplo rápido +
+ ) }, { name: "name", @@ -36,10 +46,11 @@ const form = [ className: "mt-4", inputType: "text", name: "firstName", - placeholder: "common:first", + placeholder: "common:firstName", required: "common:requiredField", type: "input", - validate: (value) => value === "James" || "common:invalidName" + validate: (value: any) => + !value.includes("test") || "common:invalidName" }, { className: "mt-4", @@ -70,10 +81,9 @@ const form = [ inputType: "select", placeholder: "common:language", options: [ - { label: "common:en", value: "en" }, - { label: "common:es", value: "es" } - ], - required: true + { label: "common:english", value: "en" }, + { label: "common:spanish", value: "es" } + ] } ] }, @@ -90,15 +100,18 @@ const form = [ function App() { return (
-
console.log("Data", data)} + console.log("Data", data)} form={form} />
); } ``` -**Output:** -https://qywrh.csb.app/ +## Interactive demo +Demo: [CodeSandBox](https://codesandbox.io/s/rbf-quick-example-qywrh) + +## All configuration options +All possible configuration options are defined in the [FormConfig interface file](https://github.com/start-at-root/react-breeze-form/blob/master/src/interfaces/FormConfig.ts#L15) ## Contributors ✨ diff --git a/src/components/SubmitBtn.tsx b/src/components/SubmitBtn.tsx index f85cf2a..4ed9f0f 100644 --- a/src/components/SubmitBtn.tsx +++ b/src/components/SubmitBtn.tsx @@ -7,7 +7,7 @@ import {DefaultInputProps} from '../interfaces/FormConfig'; /** Submit button */ export default (props: DefaultInputProps) => { const { - elementConfig: {block, className, col, placeholder}, + elementConfig: {block, className, col, color, disabled, placeholder}, } = props; const {t} = useTranslation(); @@ -17,7 +17,9 @@ export default (props: DefaultInputProps) => { diff --git a/src/interfaces/FormConfig.ts b/src/interfaces/FormConfig.ts index 23a1c46..b676fcf 100644 --- a/src/interfaces/FormConfig.ts +++ b/src/interfaces/FormConfig.ts @@ -1,4 +1,5 @@ import {FormProps} from 'react-hook-form/dist/types'; +import {ButtonProps} from 'reactstrap/lib/Button'; import {InputType} from 'reactstrap/lib/Input'; export interface SelectSelectionInterface { @@ -12,7 +13,7 @@ export interface FormHeader { className?: string; } -export interface FormConfig { +export interface FormConfig extends Omit { name: string; type: string | React.ReactNode; col?: number; @@ -37,7 +38,6 @@ export interface FormConfig { pattern?: RegExp; validate?: any; isMulti?: boolean; - block?: boolean; } export interface DefaultInputProps