Skip to content

Commit 79c45e5

Browse files
CodeStixCodeStix
committed
Docs: replace FormInput occurences with Field
1 parent 3ad7a2c commit 79c45e5

19 files changed

+148
-162
lines changed

‎Todo.md

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,3 @@
99
- Rename `setDefaultValues` to `setAllValues`
1010
- Let `comparePrimitiveObject` compare deep objects too
1111
- Render JSON.stringify by default when using AnyListener without renderer
12-
13-
- Remove FormInput, FormTextArea and FormSelect

‎docs/Troubleshooting.md

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ Your form will not submit if there is an validation error. If you want to see th
1818

1919
```tsx
2020
const form = useForm(...);
21-
// Show a json representation of the errors in form,
22-
// use AnyListener to rerender when anything in the form changes
21+
// Show a json representation of the errors in form,
22+
// use AnyListener to rerender when anything in the form changes
2323
return <form>
2424
<AnyListener form={form} render={() => <pre>{JSON.stringify(form.errorMap, null, 2)}</pre>} />
2525
</form>
@@ -29,13 +29,13 @@ return <form>
2929

3030
## Problem with styled-components
3131

32-
For some reason when using the builtin inputs (FormInput, FormSelect ...) and [styled-components](https://github.com/styled-components/styled-components), there is a weird bug that breaks type checking on the styled component.
32+
When you use [styled-components](https://github.com/styled-components/styled-components) to style your inputs, there is a weird bug that breaks type checking on the styled component.
3333

3434
**Use the following solution:**
3535

3636
```tsx
37-
// Example styled FormInput
38-
const CustomInput: typeof FormInput = styled(FormInput)`
37+
// Example styled CustomInput
38+
const StyledCustomInput: typeof CustomInput = styled(CustomInput)`
3939
&.typed-form-dirty {
4040
background-color: #0001;
4141
}
@@ -46,27 +46,3 @@ const CustomInput: typeof FormInput = styled(FormInput)`
4646
}
4747
`;
4848
```
49-
50-
**If you are using styled with custom props, use the following solution:**
51-
52-
```tsx
53-
import { StyledFix } from "typed-react-form";
54-
55-
// Example styled FormInput with styled props (primaryColor)
56-
// Use the StyledFix helper type to explicitly define the type and prop type.
57-
const CustomInput: StyledFix<typeof FormInput, { primaryColor: string }> = styled(FormInput)<{ primaryColor: string }>`
58-
border: 1px solid ${(e) => e.primaryColor};
59-
60-
&.typed-form-dirty {
61-
background-color: #0001;
62-
}
63-
64-
&.typed-form-error {
65-
color: red;
66-
font-weight: bold;
67-
}
68-
`;
69-
```
70-
71-
🤔 There must be a better way to fix this, this is a temporary solution.
72-

‎docs/advanced/Object-fields.md

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,25 @@ function PersonForm() {
2121
// Info object contains email and age
2222
const form = useForm({
2323
name: "John",
24-
info: { email: "[email protected]", age: 20 },
24+
info: { email: "[email protected]", age: 20 }
2525
});
2626
return (
2727
<form
2828
onSubmit={(ev) => {
2929
ev.preventDefault();
3030
console.log("submit", form.values);
31-
}}>
31+
}}
32+
>
3233
{/* Input on root form */}
33-
<FormInput form={form} type="text" name="name" />
34+
<Field form={form} type="text" name="name" />
3435
<ChildForm
3536
form={form}
3637
name="info"
3738
render={(form) => (
3839
<>
3940
{/* Inputs on child form, use new form provided by the render function of ChildForm */}
40-
<FormInput form={form} type="text" name="email" />
41-
<FormInput form={form} type="number" name="age" />
41+
<Field form={form} type="text" name="email" />
42+
<Field form={form} type="number" name="age" />
4243
</>
4344
)}
4445
/>
@@ -61,12 +62,13 @@ function PersonForm() {
6162
onSubmit={(ev) => {
6263
ev.preventDefault();
6364
console.log("submit", form.values);
64-
}}>
65+
}}
66+
>
6567
{/* Use root form */}
66-
<FormInput form={form} type="text" name="name" />
68+
<Field form={form} type="text" name="name" />
6769
{/* Use child form */}
68-
<FormInput form={personInfoForm} type="number" name="age" />
69-
<FormInput form={personInfoForm} type="text" name="email" />
70+
<Field form={personInfoForm} type="number" name="age" />
71+
<Field form={personInfoForm} type="text" name="email" />
7072
<button>Submit</button>
7173
</form>
7274
);
@@ -90,15 +92,16 @@ function PersonForm() {
9092
// Create the root form
9193
const form = useForm({
9294
name: "John",
93-
info: { email: "[email protected]", age: 20 },
95+
info: { email: "[email protected]", age: 20 }
9496
});
9597
return (
9698
<form
9799
onSubmit={(ev) => {
98100
ev.preventDefault();
99101
console.log("submit", form.values);
100-
}}>
101-
<FormInput form={form} type="text" name="name" />
102+
}}
103+
>
104+
<Field form={form} type="text" name="name" />
102105
{/* Pass form */}
103106
<PersonInfoForm parent={form} />
104107
<button>Submit</button>
@@ -111,8 +114,8 @@ function PersonInfoForm(props: { parent: FormState<Person> }) {
111114
const form = useChildForm(props.parent, "info");
112115
return (
113116
<>
114-
<FormInput form={form} type="text" name="email" />
115-
<FormInput form={form} type="number" name="age" />
117+
<Field form={form} type="text" name="email" />
118+
<Field form={form} type="number" name="age" />
116119
</>
117120
);
118121
}
@@ -132,10 +135,10 @@ function PersonForm() {
132135
moreInfo: {
133136
age: 20,
134137
moreMoreInfo: {
135-
birthDate: new Date(),
136-
},
137-
},
138-
},
138+
birthDate: new Date()
139+
}
140+
}
141+
}
139142
});
140143
// Create child form
141144
const personInfoForm = useChildForm(form, "info");
@@ -148,11 +151,12 @@ function PersonForm() {
148151
onSubmit={(ev) => {
149152
ev.preventDefault();
150153
console.log("submit", form.values);
151-
}}>
152-
<FormInput form={form} type="text" name="name" />
153-
<FormInput form={personInfoForm} type="text" name="email" />
154-
<FormInput form={personMoreInfoForm} type="number" name="age" />
155-
<FormInput form={personMoreMoreInfoForm} type="date" name="birthDate" />
154+
}}
155+
>
156+
<Field form={form} type="text" name="name" />
157+
<Field form={personInfoForm} type="text" name="email" />
158+
<Field form={personMoreInfoForm} type="number" name="age" />
159+
<Field form={personMoreMoreInfoForm} type="date" name="birthDate" />
156160
<button>Submit</button>
157161
</form>
158162
);

‎docs/advanced/Toggling-a-field.md

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,22 +12,23 @@ parent: Advanced
1212
✔️ **Toggle string field using checkbox**
1313

1414
```tsx
15-
import { useForm, FormInput } from "typed-react-form";
15+
import { useForm, Field } from "typed-react-form";
1616

1717
function ToggleForm() {
1818
const form = useForm({
19-
name: "codestix",
19+
name: "codestix"
2020
});
2121
return (
2222
<form
2323
onSubmit={(ev) => {
2424
ev.preventDefault();
2525
console.log("submit", form.values);
26-
}}>
26+
}}
27+
>
2728
{/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
28-
<FormInput form={form} name="name" type="checkbox" setNullOnUncheck value="" />
29+
<Field form={form} name="name" type="checkbox" setNullOnUncheck value="" />
2930
{/* Use the hideWhenNull prop to hide the input when its field is null */}
30-
<FormInput form={form} name="name" type="text" hideWhenNull />
31+
<Field form={form} name="name" type="text" hideWhenNull />
3132
<button>Submit</button>
3233
</form>
3334
);
@@ -40,27 +41,28 @@ function ToggleForm() {
4041
function ToggleForm() {
4142
const form = useForm({
4243
name: "codestix",
43-
location: { long: 123, lat: 456 }, // Object field
44+
location: { long: 123, lat: 456 } // Object field
4445
});
4546
return (
4647
<form
4748
onSubmit={(ev) => {
4849
ev.preventDefault();
4950
console.log("submit", form.values);
50-
}}>
51-
<FormInput form={form} name="name" type="text" />
51+
}}
52+
>
53+
<Field form={form} name="name" type="text" />
5254

5355
{/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
54-
<FormInput form={form} name="location" type="checkbox" setNullOnUncheck />
56+
<Field form={form} name="location" type="checkbox" setNullOnUncheck />
5557
{/* ChildForm hides its contents when null/undefined by default */}
5658
<ChildForm
5759
form={form}
5860
name="location"
5961
render={(form) => (
6062
<>
6163
<p>Location lat/long</p>
62-
<FormInput form={form} name="lat" type="number" />
63-
<FormInput form={form} name="long" type="number" />
64+
<Field form={form} name="lat" type="number" />
65+
<Field form={form} name="long" type="number" />
6466
</>
6567
)}
6668
/>

‎docs/examples/Auto-disable-submit-button.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ parent: Examples
1111
function FormExample() {
1212
const form = useForm(
1313
{
14-
name: "John",
14+
name: "John"
1515
},
1616
(values) => ({
1717
// Example validator
18-
name: values.name.length < 3 ? "Name must be longer" : undefined,
18+
name: values.name.length < 3 ? "Name must be longer" : undefined
1919
})
2020
);
2121
return (
@@ -24,8 +24,9 @@ function FormExample() {
2424
ev.preventDefault();
2525
console.log("save", form.values);
2626
form.setDefaultValues(form.values);
27-
}}>
28-
<FormInput form={form} name="name" />
27+
}}
28+
>
29+
<Field form={form} name="name" />
2930
{/* Listen for any change on the form */}
3031
<AnyListener form={form} render={(form) => <button disabled={!form.dirty || form.error}>Save</button>} />
3132
</form>

‎docs/examples/Custom-input.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ parent: Examples
55

66
## Custom input
77

8-
If the default input types (FormInput, FormSelect ...) do not provide enough functionality for you, you should create a custom input component.
8+
If the default [`<Field/>`](/typed-react-form/reference/Field) component does not provide enough functionality for you, you can create a custom field component.
99

1010
![custom input](/typed-react-form/images/custominput.gif)
1111

@@ -37,7 +37,7 @@ function ExampleForm() {
3737
const form = useForm(
3838
{
3939
firstName: "John",
40-
lastName: "Pineapple",
40+
lastName: "Pineapple"
4141
},
4242
(values) => ({ firstName: values.firstName.length < 3 ? "Firstname must be longer!" : undefined }) // Example validator
4343
);
@@ -50,7 +50,8 @@ function ExampleForm() {
5050
if (form.error) return;
5151
form.setState({ isSubmitting: true });
5252
console.log("submit", form.values);
53-
}}>
53+
}}
54+
>
5455
<CustomInput form={form} name="firstName" />
5556
<CustomInput form={form} name="lastName" />
5657
<button>Submit</button>

‎docs/examples/Live-json-component.md

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,10 @@ function ExampleForm() {
2525
onSubmit={async (ev) => {
2626
ev.preventDefault();
2727
console.log("submit", form.values);
28-
}}>
29-
<FormInput form={form} name="name" />
30-
<FormInput type="number" form={form} name="age" />
28+
}}
29+
>
30+
<Field form={form} name="name" />
31+
<Field type="number" form={form} name="age" />
3132
{/* Use your component, pass the form */}
3233
<FormJson form={form} />
3334
{/* Using AnyListener, provides the same functionality */}

‎docs/index.md

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -64,19 +64,12 @@ function MyForm() {
6464

6565
### Creating inputs
6666

67-
This library provides the following built-in components to create type-checked inputs:
68-
69-
- [FormInput](/typed-react-form/reference/FormInput)
70-
- [FormSelect](/typed-react-form/reference/FormSelect)
71-
- [FormTextArea](/typed-react-form/reference/FormTextArea)
72-
73-
When these inputs do not satisfy your needs, you can always [implement your own](/typed-react-form/examples/Custom-input#example-custom-input). These built-in components are just abstractions around hook calls.
67+
Use the `<Field/>` component to create an input. (Which is type checked, you cannot misspell the field name, awesome!)
7468

7569
✔️ **Example type-checked form consisting of 2 fields**
7670

7771
```tsx
78-
// Import FormInput
79-
import { useForm, FormInput } from "typed-react-form";
72+
import { useForm, Field } from "typed-react-form";
8073

8174
function MyForm() {
8275
const form = useForm({ email: "", password: "" });
@@ -93,23 +86,27 @@ function MyForm() {
9386
return (
9487
<form onSubmit={form.handleSubmit(submit)}>
9588
{/* Make sure to pass the form prop! */}
96-
<FormInput form={form} name="email" type="text" />
97-
<FormInput form={form} name="password" type="password" />
89+
<Field form={form} name="email" type="text" />
90+
<Field form={form} name="password" type="password" />
9891
<button type="submit">Submit!</button>
9992
</form>
10093
);
10194
}
10295
```
10396

97+
You can also create checkboxes, radio buttons, textareas and selects with this component, look [here](/typed-react-form/reference/Field) for more information.
98+
99+
If the builtin Field components does not satisfy your needs, you can always [implement your own](/typed-react-form/examples/Custom-input#example-custom-input) custom input component. These built-in components are just abstractions around hook calls.
100+
104101
## Step 3: It's your turn
105102

106103
Tweak the above example to your desire by...
107104

108-
- [Reading more about `FormInput`](/typed-react-form/reference/FormInput)
105+
- [Reading more about `<Field/>`](/typed-react-form/reference/Field)
109106
- [Implementing validation](/typed-react-form/validation)
110107
- [Using object fields](/typed-react-form/advanced/Object-fields)
111108
- [Using array fields](/typed-react-form/advanced/Array-fields)
112109
- [Toggling a field using a checkbox](/typed-react-form/advanced/Toggling-a-field)
113110
- [Creating a component which shows the current form values in JSON](/typed-react-form/examples/Live-json-component)
114-
- [Creating a custom input like FormInput, FormSelect ...](/typed-react-form/examples/Custom-input)
111+
- [Creating a custom input like `<Field/>`](/typed-react-form/examples/Custom-input)
115112
- Look at the sidebar for more...

‎docs/reference/FormError.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const form = useForm(
1515
(values) => ({ name: values.name.length < 5 ? "Name must be longer" : undefined }) // Example validator
1616
);
1717

18-
<FormInput form={form} name="name" />
18+
<Field form={form} name="name" />
1919

2020
// Will render a `p` element on error.
2121
<FormError form={form} name="name" />

0 commit comments

Comments
 (0)