🛡️ YashAuth

YashAuth is a React component library for creating customizable forms with built-in validation. It provides an easy way to handle user inputs, validation, and submission, making it perfect for authentication forms or any other input forms in your React applications.

📦 Installation

You can install YashAuth via npm:

npm install yashauth

🎨 Usage

To use the YashButton component, import it into your React component and provide the necessary props.

import YashButton from 'yashauth';

const MyForm = () => {
    const handleSubmit = (data) => {
        console.log(data);
    };

    const inputs = [
        { label: 'Username', name: 'username', type: 'text', required: true },
        { label: 'Password', name: 'password', type: 'password', required: true },
    ];

    return (
        <YashButton
            submitForm={handleSubmit}
            formTitle="Login"
            inputs={inputs}
        />
    );
};

Here's a detailed explanation of each prop for the YashButton component in your YashAuth library, along with examples demonstrating how to use them effectively:

⚙️ Props

| Prop | Type | Description | Example | |--------------------|--------------------|---------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------| | submitForm | Function | Function to handle form submission with user data as an argument. | jsx const handleSubmit = (data) => { console.log(data); | | formTitle | String | Title of the form (default: 'Login'). | jsx <YashButton formTitle="Sign Up" ... /> | | btnStyle | Object | Custom styles for the button. | jsx const customBtnStyle = { backgroundColor: 'blue' }; <YashButton btnStyle={customBtnStyle} ... /> | | dialogStyle | Object | Custom styles for the dialog. | jsx const customDialogStyle = { padding: '30px' }; <YashButton dialogStyle={customDialogStyle} ... /> | | titleStyle | Object | Custom styles for the title. | jsx const customTitleStyle = { color: 'purple' }; <YashButton titleStyle={customTitleStyle} ... /> | | labelStyle | Object | Custom styles for the labels. | jsx const customLabelStyle = { fontWeight: 'bold' }; <YashButton labelStyle={customLabelStyle} ... /> | | inputStyle | Object | Custom styles for the input fields. | jsx const customInputStyle = { border: '2px solid green' }; <YashButton inputStyle={customInputStyle} ... /> | | submitButtonStyle| Object | Custom styles for the submit button. | jsx const customSubmitBtnStyle = { backgroundColor: 'orange' }; <YashButton submitButtonStyle={customSubmitBtnStyle} ... /> | | cancelButtonStyle| Object | Custom styles for the cancel button. | jsx const customCancelBtnStyle = { backgroundColor: 'red' }; <YashButton cancelButtonStyle={customCancelBtnStyle} ... /> | | inputs | Array | Array of input objects with label, name, type, and required fields. | jsx const inputs = [ { label: 'Username', name: 'username', type: 'text', required: true }, { label: 'Password', name: 'password', type: 'password', required: true } ]; <YashButton inputs={inputs} ... /> |

🎨 Example Usage

Here's an example that incorporates all the props and demonstrates how to use the YashButton component:

import React from 'react';
import YashButton from 'yashauth';

const MyForm = () => {
    const handleSubmit = (data) => {
        console.log('Form submitted with data:', data);
    };

    const inputs = [
        {
            label: 'Username',
            name: 'username',
            type: 'text',
            required: true,
        },
        {
            label: 'Password',
            name: 'password',
            type: 'password',
            required: true,
        },
    ];

    return (
        <YashButton
            submitForm={handleSubmit} // Function to handle form submission
            formTitle="Login"         // Title of the form
            btnStyle={{               // Custom styles for the button
                backgroundColor: '#007BFF',
                color: 'white',
                padding: '10px',
            }}
            dialogStyle={{            // Custom styles for the dialog
                backgroundColor: '#f8f9fa',
                borderRadius: '8px',
            }}
            titleStyle={{             // Custom styles for the title
                fontSize: '20px',
                textAlign: 'center',
            }}
            labelStyle={{             // Custom styles for the labels
                fontWeight: '600',
            }}
            inputStyle={{             // Custom styles for the input fields
                padding: '10px',
                border: '1px solid #ccc',
                borderRadius: '4px',
            }}
            submitButtonStyle={{      // Custom styles for the submit button
                backgroundColor: '#4CAF50',
                color: 'white',
            }}
            cancelButtonStyle={{      // Custom styles for the cancel button
                backgroundColor: '#f44336',
                color: 'white',
            }}
            inputs={inputs}           // Input configuration
        />
    );
};

export default MyForm;

Explanation of the Example

• handleSubmit: This function is triggered when the form is submitted. It logs the submitted data to the console.

• inputs: This array contains the configuration for the input fields. Each input object includes:

  • label: The label text displayed next to the input field.
  • name: The name attribute for the input, used for form submission and validation.
  • type: The type of the input (e.g., text, password).
  • required: A boolean indicating whether the input is required.

• Styling Props: Various style objects are passed to customize the button, dialog, title, labels, inputs, and buttons:

  • btnStyle: Styles applied to the button that opens the dialog.
  • dialogStyle: Styles applied to the dialog box that contains the form.
  • titleStyle: Styles for the form title.
  • labelStyle: Styles for each input label.
  • inputStyle: Styles for the input fields.
  • submitButtonStyle: Styles for the submit button.
  • cancelButtonStyle: Styles for the cancel button.

✅ Validation

YashAuth includes built-in validation for username and password:

• Username: Must be 6-16 characters long and contain at least one digit.
• Password: Must be 8-16 characters long and include at least one uppercase letter, one lowercase letter, one digit, and one special symbol.

🤝 Contributing

Contributions are welcome! If you have suggestions for improvements or features, please feel free to open an issue or submit a pull request.