signup-flow-package

It is SF form for signup-flow-app. This will be updated under the developing.

Package URL

Installation:

npm install waverunner-signup-form

or

yarn add waverunner-signup-form

Usage Example:

Add SignUpForm to your component:

Live Demo

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'] |