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 (
-
);
}
```
-**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) => {
+ block={block || false}
+ color={color || 'secondary'}
+ disabled={disabled || false}>
{t(placeholder)}
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