0.0.54 • Published 2 years ago

signup-flow-package v0.0.54

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

signup-flow-package

NPM version npm-typescriptLicense]github-license-url

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

NameTypeDefaultDescription
firstColorstring#88B431Primary color of form, e.g: button
secondColorstringD9D9D9Secondary color of form, e.g: text
headingTitlestring arrayTitle of each step, e.g:['Enter Your Information', 'Enter Your Payment Details']
subCaptionstring arraySubtitle of each step, e.g:['Enter Your Information', 'Please fill out the following fields']
stepsnumber2Form data will submit in this step
paymentMethodCreditCard, IBANIBANAdd payment method for step 2
onSubmitfunctionundefinedCallback 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