yashauth v1.3.2

🛡️ 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

🎨 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.