0.1.8 • Published 2 years ago
waverunner-signup-form v0.1.8
signup-flow-package
It is SF form for signup-flow-app. This will be updated under the developing.
Installation:
npm install waverunner-signup-formor
yarn add waverunner-signup-formUsage Example:
Add SignUpForm to your component:
import { SignUpForm } from 'signup-flow-package'
interface IFormProps {
firstName?: string;
lastName?: string;
address?: string;
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 (
<React.Fragment>
<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={2}
onSubmit={onSubmit}
paymentMethod={'dd'}
/>
</React.Fragment>
)
}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 | cc, dd | dd | Add payment method for step 2 |
| onSubmit | function | undefined | Callback when submit form data |
| message | string | `` | message text | |
| targetGeo | string array | [''] | country code array ['us', 'de', 'gb'] |
0.1.2
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.13
3 years ago
0.0.12
3 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.2
3 years ago