Skip to content

Commit 2040f2d

Browse files
justin-schroederjustin-schroeder
committed
feat: update React examples and repeater docs
Update toast, register, repeater, and useFormKitContextById React examples. Remove outdated TODO comment from repeater docs. Fix positioning and hydration issues in React example components.
1 parent 2ce4df1 commit 2040f2d

18 files changed

Lines changed: 86 additions & 70 deletions

‎3.inputs/repeater.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,6 @@ The `repeater` input is for repeating groups of inputs. You can use any number o
1717

1818
By default, the repeater input has the ability to shift, add, and remove items:
1919

20-
<!-- TODO: determine why drag and drop is not working on example -->
21-
2220
::Example
2321
---
2422
name: "Repeater"

‎_examples/form/formkit-messages/toast.react.jsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { useState } from 'react'
66
import { FormKit, FormKitMessages } from '@formkit/react'
77

88
const toastStyle = {
9-
position: 'fixed',
9+
position: 'absolute',
1010
top: 0,
1111
right: 0,
1212
width: '300px',
@@ -31,10 +31,17 @@ async function submitHandler(_data, node) {
3131

3232
function ToastMessagesExample() {
3333
const [formNode, setFormNode] = useState(undefined)
34+
const [showToast, setShowToast] = useState(false)
35+
36+
async function handleSubmit(data, node) {
37+
setShowToast(false)
38+
await submitHandler(data, node)
39+
setShowToast(true)
40+
}
3441

3542
return (
36-
<>
37-
<FormKit type="form" onSubmit={submitHandler} onNode={setFormNode}>
43+
<div style={{ position: 'relative', width: '100%' }}>
44+
<FormKit type="form" onSubmit={handleSubmit} onNode={setFormNode}>
3845
<FormKit
3946
type="checkbox"
4047
label="Soccer nations"
@@ -69,12 +76,14 @@ function ToastMessagesExample() {
6976
/>
7077
</FormKit>
7178

72-
<div style={toastStyle}>
73-
<div style={toastPanelStyle}>
74-
<FormKitMessages node={formNode} />
79+
{showToast ? (
80+
<div style={toastStyle}>
81+
<div style={toastPanelStyle}>
82+
<FormKitMessages node={formNode} />
83+
</div>
7584
</div>
76-
</div>
77-
</>
85+
) : null}
86+
</div>
7887
)
7988
}
8089
/* %partial% */

‎_examples/form/register.react.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function RegisterExample() {
4545

4646
return (
4747
<>
48-
<style>{styles}</style>
48+
<style dangerouslySetInnerHTML={{ __html: styles }} />
4949
<FormKit
5050
type="form"
5151
id="registration-example"

‎_examples/form/use-formkit-context-by-id/my-form.react.jsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
/* %partial% */
22
import { FormKit, useFormKitContextById } from '@formkit/react'
33

4+
const initialValues = {
5+
a: 2,
6+
b: 3,
7+
}
8+
49
function UseFormKitContextByIdExample() {
510
const formContext = useFormKitContextById('myForm')
6-
const sum = (formContext?.value?.a ?? 0) + (formContext?.value?.b ?? 0)
11+
const values = formContext?.value ?? initialValues
12+
const sum = (values.a ?? 0) + (values.b ?? 0)
713

814
return (
9-
<FormKit type="form" id="myForm">
15+
<FormKit type="form" id="myForm" value={initialValues}>
1016
<div className="flex gap-4 items-center">
11-
<FormKit type="number" name="a" number value="2" />
12-
<FormKit type="number" name="b" number value="3" />
17+
<FormKit type="number" name="a" number />
18+
<FormKit type="number" name="b" number />
1319
<div className="whitespace-nowrap">= {sum}</div>
1420
</div>
1521
</FormKit>

‎_examples/formkit-messages/toast.vue‎

Lines changed: 46 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,60 +3,69 @@ import { ref } from 'vue'
33
import { FormKitMessages } from '@formkit/vue'
44
55
const form = ref(null)
6+
const showToast = ref(false)
67
78
async function submitHandler(_data, node) {
9+
showToast.value = false
810
await new Promise((resolve) => setTimeout(resolve, 1000))
911
node.setErrors([
1012
'Gambling is illegal.',
1113
'Your crime has been reported to the authorities.',
1214
])
15+
showToast.value = true
1316
}
1417
</script>
1518

1619
<template>
17-
<FormKit type="form" @submit="submitHandler" ref="form">
18-
<FormKit
19-
type="checkbox"
20-
label="Soccer nations"
21-
validation-label="countries"
22-
:options="[
23-
'🇧🇷 Brazil',
24-
'🇩🇪 Germany',
25-
'🇮🇹 Italy',
26-
'🇦🇷 Argentina',
27-
'🇺🇾 Uruguay',
28-
'🇫🇷 France',
29-
'🏴󠁧󠁢󠁥󠁮󠁧󠁿 England',
30-
'🇪🇸 Spain',
31-
]"
32-
help="Which 4 countries will be in the semi finals of the next world cup?"
33-
validation="required|*min:2"
34-
/>
35-
<FormKit
36-
type="mask"
37-
label="Bet amount"
38-
:show-mask="false"
39-
mask="{#,##|repeat}{#.##}"
40-
prefix="$"
41-
reverse
42-
unmask-value
43-
allow-incomplete
44-
validation="required|length:4"
45-
:validation-messages="{
46-
length: 'Minimum bet is $10.00',
47-
}"
48-
help="How much do you want to bet?"
49-
/>
50-
</FormKit>
20+
<div class="toast-demo">
21+
<FormKit type="form" @submit="submitHandler" ref="form">
22+
<FormKit
23+
type="checkbox"
24+
label="Soccer nations"
25+
validation-label="countries"
26+
:options="[
27+
'🇧🇷 Brazil',
28+
'🇩🇪 Germany',
29+
'🇮🇹 Italy',
30+
'🇦🇷 Argentina',
31+
'🇺🇾 Uruguay',
32+
'🇫🇷 France',
33+
'🏴 England',
34+
'🇪🇸 Spain',
35+
]"
36+
help="Which 4 countries will be in the semi finals of the next world cup?"
37+
validation="required|*min:2"
38+
/>
39+
<FormKit
40+
type="mask"
41+
label="Bet amount"
42+
:show-mask="false"
43+
mask="{#,##|repeat}{#.##}"
44+
prefix="$"
45+
reverse
46+
unmask-value
47+
allow-incomplete
48+
validation="required|length:4"
49+
:validation-messages="{
50+
length: 'Minimum bet is $10.00',
51+
}"
52+
help="How much do you want to bet?"
53+
/>
54+
</FormKit>
5155

52-
<div class="toast">
53-
<FormKitMessages :node="form?.node" />
56+
<div v-if="showToast" class="toast">
57+
<FormKitMessages :node="form?.node" />
58+
</div>
5459
</div>
5560
</template>
5661

5762
<style scoped>
63+
.toast-demo {
64+
position: relative;
65+
}
66+
5867
.toast {
59-
position: fixed;
68+
position: absolute;
6069
top: 0;
6170
right: 0;
6271
width: 300px;

‎_examples/repeater/errors/repeater-errors.react.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export default function App() {
4444
{({ value }) => (
4545
<>
4646
<FormKit
47-
id="repeater"
4847
name="teamMembers"
4948
type="repeater"
5049
label="Additional Team Members"

‎_examples/repeater/errors/repeater-errors.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ async function submitTeamMembers(teamMembers, formNode) {
3131
help="hello"
3232
>
3333
<FormKit
34-
id="repeater"
3534
name="teamMembers"
3635
type="repeater"
3736
label="Additional Team Members"

‎_examples/repeater/repeater-add-button-attrs.react.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ export default function App() {
1313
<FormKit type="form" actions={false}>
1414
{/* %partial% */}
1515
<FormKit
16-
id="repeater"
1716
name="users"
1817
type="repeater"
1918
label="Philosophy Department Teaching Staff"

‎_examples/repeater/repeater-add-button-attrs.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
>
66
<!-- %partial%::html:: -->
77
<FormKit
8-
id="repeater"
98
name="users"
109
type="repeater"
1110
label="Philosophy Department Teaching Staff"
@@ -27,4 +26,4 @@
2726
</FormKit>
2827
<!-- %partial%::html:: -->
2928
</FormKit>
30-
</template>
29+
</template>

‎_examples/repeater/repeater-base.react.jsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ export default function App() {
1919
<>
2020
{/* %partial% */}
2121
<FormKit
22-
id="repeater"
2322
name="users"
2423
type="repeater"
2524
label="Users"

0 commit comments

Comments
 (0)