first react typescript package for signup-flow-app
npm install signup-flow-packagebash
npm install signup-flow-package
`
or
`bash
yarn add signup-flow-package
`
Usage Example:
Add SignUpForm to your component:
`js
import Layout from '../layout/Layout';
import { SignUpForm, useSignUpForm } from 'signup-flow-package';
interface IFormProps {
firstName?: string;
lastName?: string;
address?: string | undefined;
zipCode?: string;
city?: string;
phoneNumber?: string;
email?: string;
cardNumber?: string;
}
export default function Home() {
const { steps, currentStep, isFirstStep, isLastStep, loading, setLoading, back, next } = useSignUpForm([
'informationForm',
'paymentForm'
])
const onSubmit = (data: IFormProps) => {
console.log(data);
};
return (
Get the new iPhone 13
secondColor='#D9D9D9'
headingTitle={[
'Enter Your Information',
'Enter Your Payment Details',
]}
subCaption={[
'Please fill out the following fields to create an account: *Email and password are case sensitive',
'',
]}
steps={steps}
currentStep={currentStep}
loading={loading}
back={back}
onSubmit={onSubmit}
paymentMethod={'CC'}
/>
<>
);
}
`
Props
| Name | Type | Default | Description |
| :-------------------- | :--------------- | :---------: | :---------------------------------------------------------------------------------------------- |
| [firstColor]() | string | #88B431 | Primary color of form, e.g: button |
| [secondColor]() | string | D9D9D9 | Secondary color of form, e.g: text |
| [headingTitle]() | string array | | Title of each step, e.g:['Enter Your Information', 'Enter Your Payment Details'] |
| [subCaption]() | string array | | Subtitle of each step, e.g:['Enter Your Information', 'Please fill out the following fields'] |
| [steps]() | number | 2 | Form data will submit in this step |
| [paymentMethod]() | CreditCard, IBAN | IBAN | Add payment method for step 2 |
| [onSubmit]() | function | undefined` | Callback when submit form data |