[FEAT]: Allow custom submit button label

camin-mccluskey · Nov 23, 2023 · 320fc4e · 320fc4e
1 parent ebcc290
commit 320fc4e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 5 deletions.
diff --git a/examples/submitStepper/package-lock.json b/examples/submitStepper/package-lock.json
diff --git a/examples/submitStepper/src/form/StepThree.tsx b/examples/submitStepper/src/form/StepThree.tsx
@@ -121,7 +121,14 @@ export default function StepThree({ data, onSubmit, reportValidity }: StepThreeP
       <button type="button" onClick={() => append({ name: '', type: Animal.DOG })}>
         Add a pet
       </button>
-      <SubmitButton handleSubmit={handleSubmit} onSubmit={onSubmit} disabled={!isValid} />
+      <SubmitButton handleSubmit={handleSubmit} onSubmit={onSubmit} disabled={!isValid}>
+        <div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" />
+          </svg>
+          <span>Done</span>
+        </div>
+      </SubmitButton>
     </form>
   )
 }

diff --git a/examples/submitStepper/src/form/StepTwo.tsx b/examples/submitStepper/src/form/StepTwo.tsx
@@ -50,7 +50,12 @@ export default function StepTwo({ data, onSubmit, reportValidity }: StepTwoProps
       <label>Country Code</label>
       <input type="text" {...register('address.countryCode')} />
       <p style={{ fontSize: '10px', color: 'red' }}>{errors.address?.countryCode?.message}</p>
-      <SubmitButton handleSubmit={handleSubmit} onSubmit={onSubmit} disabled={!isValid} />
+      <SubmitButton
+        handleSubmit={handleSubmit}
+        onSubmit={onSubmit}
+        disabled={!isValid}
+        label="Next Step"
+      />
     </form>
   )
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-hook-form-multistep",
   "description": "Extensible multistep forms for React Hook Form.",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "private": false,
   "author": {
     "name": "Camin McCluskey",

diff --git a/src/components/SubmitButton.tsx b/src/components/SubmitButton.tsx
@@ -7,6 +7,7 @@ import type { FormStepOnSubmit } from '~/types'
 type SubmitButtonProps<StepFormData extends FieldValues> = {
   label?: string
   className?: string
+  children?: React.ReactNode
   handleSubmit: UseFormHandleSubmit<StepFormData>
   onSubmit: FormStepOnSubmit<StepFormData>
   disabled: boolean
@@ -15,6 +16,7 @@ type SubmitButtonProps<StepFormData extends FieldValues> = {
 export default function SubmitButton<StepFormData extends FieldValues>({
   label = 'Next',
   className,
+  children,
   handleSubmit,
   onSubmit,
   disabled,
@@ -29,7 +31,7 @@ export default function SubmitButton<StepFormData extends FieldValues>({
 
   return (
     <button type="submit" className={className} disabled={disabled} ref={submitButtonRef}>
-      {label}
+      {children || label}
     </button>
   )
 }