0.0.54 • Published 11 months ago

signup-flow-package v0.0.54

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months 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

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