Quick Start

Good to know: A quick start guide can be good to help folks get up and running with your Library in a few steps. Some people prefer diving in with the basics rather than meticulously reading every page of documentation!

Requirements

Before you start using ReqEase, ensure you meet the following requirements:

• JQuery ^3.7.0 : ReqEase relies on jQuery for DOM manipulation and event handling. Make sure jQuery is included in your project.

• Bootstrap ^4.2.1 : (not always), ReqEase releis on Bootstrap when using modals or toasts.

Bootstrap is required only if the useReadyModal was setted to 'bootstrap' . otherwise you can skip it.

learn more about it in Modals.

Installation

Before diving into ReqEase, you'll need to include it in your project. Here are a couple of ways to do it:

Using Package Manager

If you're working in a Node.js environment or using a build tool like Webpack, you can easily include ReqEase in your project using npm:

npm install @reqease/reqease

Once installed, you can import ReqEase into your JavaScript or TypeScript code:

import ReqEase from '@reqease/reqease';

Including the Script Directly

Alternatively, you can include ReqEase directly in your HTML file using a script tag:

From CDN:

<script src="https://cdn.jsdelivr.net/gh/ReqEase/ReqEase@1.0.0/dist/reqease.min.js"></script>

From Local download:

<script src="path/to/reqease.min.js"></script>

Now that ReqEase is part of your project, let's see how you can use it to simplify your web interactions.

Basic Usage

To give you a quick overview, let's look at a basic example of using ReqEase. Suppose you have a simple HTML form:

<form id="myForm" method="POST" action="/login">
    <input type="text" name="username" required>
    <input type="password" name="password" required>
    <button type="submit">Submit</button>
</form>

With ReqEase, you can streamline the process of making an HTTP POST request when this form is submitted. Here's how you can do it:

const form = document.getElementById('myForm');
const reqease = new ReqEase({
    form,
});

Or you can use the ReqEase JQuery plugin:

const reqease = $("#myForm").ReqEase();

In this basic example, ReqEase simplifies the process of handling form submissions. It automatically looks for a submit button or a button with the #okBtn id and listens for clicks. When triggered, ReqEase initiates the complete cycle, which includes input validation, making an HTTP request, and rendering the response.

ReqEase is highly flexible and customizable. In this quick start, it auto-detects the request URL and method from the form's attributes. However, you can specify these details in the options, as we will explore in more detail in the next sections.

This quick start provides a glimpse of ReqEase's capabilities. In the following sections, we'll dive deeper into its features and explore advanced use cases.

Server-side responses

ReqEase seamlessly integrates with various backend libraries to handle responses from HTTP requests. These libraries simplify the process of creating and rendering responses compatible with ReqEase.

json

{
    version: '1.0.0',
    httpCode: 200,
    type: 'big',
    content: {
        title: 'Congratulation',
        body: 'Your have logged in.'
    },
    color: 'success',
    icon: 'fas fa-check',
    buttons: [
        {
            text: 'OK',
            action: {
                actionType: 'redirect',
                url: 'https://example.com/profile'
            },
            color: 'success'
        }
    ]
}

PHP

use HichemtabTech\ReqEase\ResponseBuilders\ButtonsBuilder;
use HichemtabTech\ReqEase\ResponseBuilders\MessageContent;
use HichemtabTech\ReqEase\ResponseBuilders\MessageResponseType;
use HichemtabTech\ReqEase\ReqEase;

$phpResponse = ReqEase::createMessageResponse()
    ->setContent(
        new MessageContent(
            'Message Title',
            'Your custom message content here.'
        )
    )
    ->setButtons(
        ButtonsBuilder::addCancelButton("Cancel")
        ->addRedirectButton('https://example.com')
    )
    ->setType(MessageResponseType::BIG)
    ->setHttpCode(200)
    ->setColor('green')
    ->setTimestamp(time())
    ->build();
$phpResponse->send();

see ho to install ReqEase-php.

Laravel

Coming soon

Python

Coming soon

Java

Coming soon

These backend libraries allow you to create structured responses that ReqEase can seamlessly render. For more details on working with backend libraries, refer to the next sections.