1.0.4 β€’ Published 9 months ago

dpost v1.0.4

Weekly downloads
11
License
MIT
Repository
-
Last release
9 months ago
# πŸš€ dpost - The Ultimate Form Submission Library for React

Welcome to **dpost**! 🌟 A powerful, flexible, and user-friendly library designed to streamline form submissions in your React applications using Axios. With `dpost`, sending data to your backend has never been easier! πŸŽ‰

## 🌟 Features

- **Seamless Form Handling**: Get started with minimal setupβ€”just wrap your forms!
- **Multiple Data Types**: Easily support various content types like `multipart/form-data`, `application/json`, and more.
- **Customizable Headers**: Tailor your requests with custom headers as needed.
- **React Compatibility**: Built specifically for React applications.
- **Built-in Error Handling**: Comprehensive error logging for hassle-free debugging.

## πŸ“š Table of Contents

- [Installation](#installation)
- [Usage](#usage)
  - [Basic Example](#basic-example)
  - [Advanced Example](#advanced-example)
- [API](#api)
- [License](#license)
- [Author](#author)

## πŸ› οΈ Installation

You can easily install `dpost` using npm or yarn:

```bash
npm install dpost

or

yarn add dpost

πŸš€ Usage

Basic Example

Here's how you can use dpost in your React component to handle a signup form:

import React from 'react';
import dpost from 'dpost'; // Import the dpost library

const App = () => {
  const handleSignupFormSubmit = dpost('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 />
          <input type="tel" name="phone" placeholder="Phone" required />
          <input type="text" name="address" placeholder="Address" required />
          <input type="number" name="age" placeholder="Age" required />
          <input type="file" name="file" required />
          <input type="file" name="image" accept="image/*" required />
          <input type="file" name="video" accept="video/*" required />
          <button type="submit">Submit</button>
        </form>
      )}
    </div>
  );
};

export default App;

Advanced Example

Customize your requests with headers and different content types:

import React from 'react';
import dpost from 'dpost';

const App = () => {
  const handleSignupFormSubmit = dpost('http://localhost:8000/signup'); 
  const handleSimpleFormSubmit = dpost('http://localhost:8000/simple');

  return (
    <div>
      <h2>πŸŽ‰ Signup Form</h2>
      {handleSignupFormSubmit(
        <form>
          <input type="text" name="name" placeholder="Name" required />
          <input type="file" name="file" required />
          <input type="file" name="image" accept="image/*" required />
          <input type="file" name="video" accept="video/*" required />
          <button type="submit">Submit</button>
        </form>
      )}

      <h2>πŸ” Simple Form</h2>
      {handleSimpleFormSubmit(
        <form>
          <input type="text" name="name" placeholder="Name" required />
          <input type="number" name="age" placeholder="Age" required />
          <button type="submit">Submit</button>
        </form>
      )}
    </div>
  );
};

export default App;

πŸ› οΈ API

dpost(url, customHeaders)

  • Parameters:

    • url (string): The endpoint URL where the form data will be submitted.
    • customHeaders (object): Optional custom headers for the request.
  • Returns: A function that takes a form JSX element and returns the same element with a submission handler.

πŸ“œ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ‘€ Author

MR GAURI SHANKAR KHADGA
LinkedIn Profile


Thank you for considering dpost! If you have any questions or suggestions, feel free to reach out. Happy coding! πŸ’»βœ¨

1.0.2

9 months ago

1.0.0

9 months ago

1.0.4

9 months ago

1.0.3

9 months ago

1.0.1

4 years ago