update docs for alternate next page

Author: stutrek

README.md

@@ -8,7 +8,7 @@ This should be used in combination with a component library and validation schem
 
 All of the examples use react-hook-form, but any library could be used.
 
-## Basic API
+## Basic Usage
 
 - Create an array of pages and/or sequences. One for each page of the form.
 - Set up `react-hook-form` 
@@ -38,7 +38,8 @@ const MyMultiPageForm = () => {
         currentPage, // the page object
         advance, // goes to the next page
         goBack, // goes back one page
-        isFinal: // if this is the last page
+        isFinal, // if this is the last page
+        isFirst, // if this is the first page
     } = useMultiPageHookForm({
         hookForm,
         pages,
@@ -51,7 +52,7 @@ const MyMultiPageForm = () => {
             register={register}
         />
 
-        {previousStep && <button onClick={goBack}>Prev</button>}
+        {!isFirst && <button onClick={goBack}>Prev</button>}
         {!isFinal ? (
             <button onClick={advance}>Next</button>
         ) : (
@@ -127,7 +128,8 @@ export function MyMultiPageForm() {
         currentPage,
         advance,
         goBack,
-        isFinal
+        isFinal,
+        isFirst
     } = useMultiPageHookForm({
         hookForm,
         pages: sequence,
@@ -149,7 +151,7 @@ export function MyMultiPageForm() {
                     />
                 </div>
                 <div className="card">
-                    {previousStep && <button onClick={goBack}>Prev</button>}
+                    {!isFirst && <button onClick={goBack}>Prev</button>}
                     {!isFinal ? (
                         <button onClick={advance}>Next</button>
                     ) : (

docs/src/app/docs/api/page.mdx

@@ -26,6 +26,7 @@ type HookFormPage<DataT, ComponentProps = { hookForm: UseFormReturn }> = {
 	isFinal?: (data: Partial<DataT>) => boolean; // return true if this should be the final page of the form.
     isRequired?: (data: Partial<DataT>) => boolean | undefined; // Determines if this page is needed based on form data. Default: () => true
     validate?: (data: Partial<DataT>) => Promise<FieldErrors | undefined>; // Determines whether or not to continue.
+    alternateNextPage: (data: Partial<DataT>) => pageId; // Useful if you need to override the default order of pages
 
 	// event handlers
 	onArrive?: (data: Partial<DataT>) => void; // Function to execute upon arriving at this page.
@@ -140,7 +141,7 @@ export function MyMultiPageForm() {
             hookForm={hookForm}
         />
 
-        {previousStep && <button onClick={goBack}>Prev</button>}
+        {!isFirst && <button onClick={goBack}>Prev</button>}
         {!isFinal ? (
             <button onClick={advance}>Next</button>
         ) : (

docs/src/app/docs/page.mdx

@@ -128,6 +128,7 @@ const MyMultiPageForm = () => {
         advance, // goes to the next page
         goBack, // goes back one page
         isFinal, // if this is the last page
+        isFirst, // if this is the first page
     } = useMultiPageHookForm<FormSchema>({
         hookForm,
         pages: [mySequence, otherPage],
@@ -139,7 +140,7 @@ const MyMultiPageForm = () => {
             hookForm={hookForm}
         />
     
-        {previousStep && <button onClick={goBack}>Prev</button>}
+        {!isFirst && <button onClick={goBack}>Prev</button>}
         {!isFinal ? (
             <button onClick={advance}>Next</button>
         ) : (