quickx/index.js

A flexible form handling library for React + VITE using axios.

import React from 'react';
import axios from 'axios';
import DOMPurify from 'dompurify'; 

const quickpost = (url, customHeaders = {}) => (formJSX) => {
  const handleSubmit = async (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    
    const data = Object.fromEntries(formData.entries());
    Object.keys(data).forEach(key => {
      data[key] = DOMPurify.sanitize(data[key]); 
    });

    const hasFileInputs = Array.from(e.target.elements).some((input) => input.type === 'file');

    try {
      const response = await axios.post(url, hasFileInputs ? formData : data, {
        headers: {
          'Content-Type': hasFileInputs ? 'multipart/form-data' : 'application/json',
          ...customHeaders,
        },
      });
      console.log('Post -> data submitted successfully:', response.data);
    } catch (error) {
      console.error('Post -> Error submitting form:', error.response ? error.response.data : error.message);
    }
  };

  return React.cloneElement(formJSX, { onSubmit: handleSubmit });
};

const quickget = (url, customHeaders = {}, params = {}) => {
  return async () => {
    try {
      const response = await axios.get(url, {
        headers: {
          ...customHeaders,
        },
        params,
      });
      console.log('Get -> data fetched successfully:', response.data);
      return response.data;
    } catch (error) {
      console.error('Get -> Error fetching data:', error.response ? error.response.data : error.message);
    }
  };
};

export { quickpost, quickget };