@licuido-ui/ui_sign-up v0.0.2

SignUp

The SignUp component is a reusable React component that provides a signup form with various options. It allows users to sign up using either their email with a password, mobile number, or through social media accounts.

Author

• @author Akila Kalaiyarasan akila@crayond.co

Link

Story Book Link SignUp

PlayGround

Try it have a fun codeBox

Installation

npm i "@licuido-ui/ui_sign-up"

Import component

import { SignUp } from '@licuido-ui/ui_sign-up';

Usage

<SignUp variant='emailWithPasswordSignup' />

Image

Sample Code

<SignUp  variant= 'emailWithPasswordSignup'
    mainArea= {
      breakpoints: { xs: 6, md: 6, sm: 6, lg: 6 },
    }
    imageSection={
      breakpoints:{ xs: 6, md: 6, sm: 6, lg: 6 },
      src=''
    }
    onSubmit={(data: any) =>{
      console.log(data);
    }}
    cardLogoAltTxt='logo'
    logoSrc= {<Logo />}
    logoHeight= '100%'
    logoWidth= '100%'
    rootStyle= {}
    cardTitle= 'Welcome!'
    cardDescription= 'One positive feedback per day or week can make us grow exponentially'
    cardTitleStyle={}
    buttonText='Sign Up'
    actionText= 'You have an account?'
    actionLink= 'Log in'
    cardStyle= { p: 3 }
    onLoginClick={ () =>{
      console.log('login');
    }}
    actionStyle= { fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }
    actionLinkStyle={ fontSize: { xs: '12px', md: '14px', sm: '14px', lg: '14px' } }
    btnStyle={}
    mobileLabelText='Mobile Number'
    mobileLabelStyle= {}
    mobileFieldstyle= {}
    dropDownStyle={}
    mobNumberFontSize=''
    countryCodeFontWeight= ''
    contryCodefontSize= ''
    socialMediaList={[
      {
        label: 'SignUp with google',
        icon: <Google />,
        onSocialmediaSignUp: () => {
          console.log('SignUp with google');
        },
        style: {
          textAlign: 'center',
          width: '100%',
          color: '#3B3B3B',
          fontSize: '14px',
        },
        // SocialMediaButtonStyle: { p: 1 },
      },
      {
        label: 'SignUp with outlook',
        icon: <Google />,
        onSocialmediaSignUp: () => {
          console.log('SignUp with google');
        },
        style: {
          textAlign: 'center',
          width: '100%',
          color: '#3B3B3B',
          fontSize: '14px',
        },
        // SocialMediaButtonStyle: { p: 1 },
      },
    ]}
    emailFieldstyle={}
    emailInputvariant= 'outlined'
    emailLabelStyle= {}
    emailLabel= 'Email'
    passwordLabelStyle= {}
    passwordLabel='Password'
    pwdInputVariant= 'outlined'
    invisibleIcon= {<VisibilityOffOutlinedIcon />}
    visbleIcon= {<VisibilityOutlinedIcon />}
    pwdFieldstyle= {}
    variantContainerSx= {}
    cardHeight= 'auto'
    cardWidth= '400px'
    cardBoxShadow= '0px 8px 20px #0000000A'
    cardBgColor=''
    nameStyle= {}
    fNameLabel= 'First Name'
    fNameLabelStyle= {}
    fnameFieldStyle= {}
    fNameInputVariant='outlined'
    lNameLabel= 'Last Name'
    lNameLabelStyle= {}
    lNameFieldStyle={}/>

Props

Image Section Properties

Main Area Properties: