0.0.54 • Published 2 years 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
2 years ago
0.0.53
2 years ago
0.0.54
2 years ago
0.0.50
2 years ago
0.0.49
2 years ago
0.0.48
2 years ago
0.0.47
2 years ago
0.0.46
2 years ago
0.0.45
2 years ago
0.0.44
2 years ago
0.0.43
2 years ago
0.0.42
2 years ago
0.0.41
2 years ago
0.0.40
2 years ago
0.0.39
2 years ago
0.0.38
2 years ago
0.0.37
2 years ago
0.0.36
2 years ago
0.0.35
2 years ago
0.0.34
2 years ago
0.0.33
2 years ago
0.0.32
2 years ago
0.0.31
2 years ago
0.0.30
2 years ago
0.0.29
2 years ago
0.0.28
2 years ago
0.0.27
2 years ago
0.0.26
2 years ago
0.0.25
2 years ago
0.0.24
2 years ago
0.0.23
2 years ago
0.0.22
2 years ago
0.0.21
2 years ago
0.0.20
2 years ago
0.0.19
2 years ago
0.0.18
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago