0.0.54 • Published 11 months ago
signup-flow-package v0.0.54
signup-flow-package
It is SF form for signup-flow-app. This will be updated under the developing.
Installation:
npm install signup-flow-package
or
yarn add signup-flow-package
Usage Example:
Add SignUpForm
to your component:
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 (
<Layout>
<h2> Get the new iPhone 13 </h2>
<div>
<SignUpForm
firstColor='#88B431'
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'}
/>
</div>
<>
</Layout>
);
}
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 |
0.0.52
11 months ago
0.0.53
11 months ago
0.0.54
11 months ago
0.0.50
11 months ago
0.0.49
12 months ago
0.0.48
12 months ago
0.0.47
12 months ago
0.0.46
12 months ago
0.0.45
12 months ago
0.0.44
1 year ago
0.0.43
1 year ago
0.0.42
1 year ago
0.0.41
1 year ago
0.0.40
1 year ago
0.0.39
1 year ago
0.0.38
1 year ago
0.0.37
1 year ago
0.0.36
1 year ago
0.0.35
1 year ago
0.0.34
1 year ago
0.0.33
1 year ago
0.0.32
1 year ago
0.0.31
1 year ago
0.0.30
1 year ago
0.0.29
1 year ago
0.0.28
1 year ago
0.0.27
1 year ago
0.0.26
1 year ago
0.0.25
1 year ago
0.0.24
1 year ago
0.0.23
1 year ago
0.0.22
1 year ago
0.0.21
1 year ago
0.0.20
1 year ago
0.0.19
1 year ago
0.0.18
1 year ago
0.0.17
1 year ago
0.0.16
1 year ago
0.0.15
1 year ago
0.0.14
1 year ago
0.0.13
1 year ago
0.0.12
1 year ago
0.0.11
1 year ago
0.0.10
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.2
1 year ago
0.0.1
1 year ago