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 [email protected]

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

| Prop Name | Type | Default Value | Description | | ----------------------- | ------------------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------- | | signUpId | string | 'signUp' | A unique identifier for the SignUp component. | | className | string | '' | CSS class name to apply to the root element of the component. | | sx | object | {} | Custom styling using the MUI SxProps type. | | variant | string | 'emailWithPasswordSignup' | The type of signup variant. Can be 'emailWithPasswordSignup', 'mobileNumberSignup', or 'socialMediaSignup'. | | onSubmit | function | (detail: object) => undefined | A callback function called when the user submits the form. Receives an object with user details. | | mainArea | object | See below | Configuration for the main area of the component. | | imageSection | object | See below | Configuration for an optional image section. | | rootStyle | object | {} | Custom styling for the root container. | | logoStyle | object | {} | Custom styling for the logo image. | | cardLogoAltTxt | string | 'logo' | Alternative text for the logo image. | | cardDescription | string | '' | Description text displayed below the card title. | | logoWidth | string | '' | Width of the logo image. | | logoHeight | string | '' | Height of the logo image. | | logoSrc | string or ReactNode | '' | Source URL or ReactNode for the logo image. | | cardTitle | string or any | '' | Title text displayed at the top of the card. | | variantContainerSx | object | {} | Custom styling for the container of variant-specific content. | | cardTitleStyle | object | {} | Custom styling for the card title. | | buttonText | string | '' | Text displayed on the primary action button. | | actionText | string | '' | Text displayed below the primary action button. | | cardStyle | object | {} | Custom styling for the card container. | | cardBoxShadow | string | '' | Box shadow CSS property for the card. | | cardBgColor | string | '' | Background color for the card. | | cardHeight | string | 'auto' | Height of the card container. | | cardWidth | string | 'auto' | Width of the card container. | | btnStyle | object | {} | Custom styling for the primary action button. | | actionLink | string | '' | URL or link to navigate to when clicking the action text. | | actionLinkStyle | object | {} | Custom styling for the action link. | | actionStyle | object | {} | Custom styling for the action text. | | onLoginClick | function | () => undefined | Callback function called when clicking the action text. | | socialMediaList | array of objects | [] | List of social media buttons and their configurations. | | mobileLabelStyle | object | {} | Custom styling for the mobile number label. | | mobileLabelText | string | 'Mobile Number' | Label text for the mobile number input field. | | countryCodeFontWeight | string or number | '' | Font weight for the country code dropdown. | | contryCodefontSize | string or number | '' | Font size for the country code dropdown. | | mobileFieldstyle | object | {} | Custom styling for the mobile number input field. | | mobNumberFontSize | string or number | '' | Font size for the mobile number input field. | | dropDownStyle | object | {} | Custom styling for the country code dropdown. | | nameStyle | object | {} | Custom styling for the name input fields (first name and last name). | | fNameLabel | string | 'First Name' | Label for the first name input field. | | fNameLabelStyle | object | {} | Custom styling for the first name label. | | fnameFieldStyle | object | {} | Custom styling for the first name input field. | | fNameInputVariant | string | 'outlined' | Input variant for the first name field. | | lNameLabel | string | 'Last Name' | Label for the last name input field. | | lNameLabelStyle | object | {} | Custom styling for the last name label. | | lNameFieldStyle | object | {} | Custom styling for the last name input field. | | emailLabel | string | 'Email' | Label for the email input field. | | emailInputvariant | string | 'outlined' | Input variant for the email field. | | emailFieldstyle | object | {} | Custom styling for the email input field. | | emailLabelStyle | object | {} | Custom styling for the email label. | | pwdFieldstyle | object | {} | Custom styling for the password input field. | | passwordLabelStyle | object | {} | Custom styling for the password label. | | passwordLabel | string | 'Password' | Label for the password input field. | | pwdInputVariant | string | 'outlined' | Input variant for the password field. | | invisibleIcon | ReactNode | VisibilityOffOutlinedIcon | React node for the icon indicating invisible password. | | visbleIcon | ReactNode | VisibilityOutlinedIcon | React node for the icon indicating visible password. |

Image Section Properties

| Property | Type | Default Value | Description | | --------------------- | --------- | ----------------- | ------------------------------------------------------- | | breakpoints | Object | {} | Breakpoints for customizing the image section. | | src | string | '' | Source URL for the image in the image section. | | height | string | '' | Height of the image in the image section. | | width | string | '' | Width of the image in the image section. | | style | Object | {} | Custom styling for the image section. | | backgroundWrapStyle | Object | {} | Custom styling for the background of the image section. | | component | ReactNode | null | A React component to be used in place of the image. |

Main Area Properties:

| Property | Type | Default Value | Description | | ----------------- | -------- | ------------------- | --------------------------------------------------------------------------------------------------------------- | | breakpoints | Object | { xs: 12, md: 6 } | Responsive breakpoints for the main area. Specifies the number of columns to display at different screen sizes. | | WraperStyle | Object | {} | Custom styling for the main area wrapper using Material-UI's SxProps<Theme>. | | cardParentStyle | Object | {} | Custom styling for the card parent container within the main area using Material-UI's SxProps<Theme>. |