Quickx NPM | npm.io

quickx - Form and data handling Library for React + vite

🌟 Features

Seamless form handling.
Supports multiple data types: multipart/form-data, application/json, etc.
Customizable headers.
React compatibility.
Built-in error handling.
Easy data fetching with quickget.

🛠️ Installation

npm install quickx

🚀 Usage

Basic Example

import React from 'react';
import { quickpost } from 'quickx';

const App = () => {
  //use your api for posting data
  const handleSignupFormSubmit = quickpost('http://localhost:8000/signup');

  return (
    <div>
      <h2>Signup Form</h2>
      {handleSignupFormSubmit(
        <form>
          <input type="text" name="name" placeholder="Name" required />
          <input type="password" name="password" placeholder="Password" required />
          <button type="submit">Submit</button>
        </form>
      )}
    </div>
  );
};

export default App;

Data Fetching Example

import React, { useEffect, useState } from 'react';
import { quickget } from 'quickx';

const App = () => {
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const result = await quickget('https://jsonplaceholder.typicode.com/posts')();
    setData(result);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
};

export default App;

🛠️ API

`quickpost(url, customHeaders)`

Parameters:
- url: Endpoint for form submission.
- customHeaders: Optional custom headers.
Returns: Function to handle form submission.

`quickget(url, customHeaders, params)`

Parameters:
- url: API endpoint for data fetching.
- customHeaders: Optional custom headers.
- params: Optional URL parameters.
Returns: Async function to fetch data.