react-form-status-handler

A lightweight and flexible React hook and component for managing and displaying form statuses such as loading, success, and error messages.

Table of Contents

• Installation
• Usage
  • useFormStatus Hook
  • FormStatus Component
• Examples
  • Basic Example
  • Custom Styling Example
• API
  • useFormStatus
  • FormStatus
• Contributing
• License

Installation

Install the package via npm:

npm install react-form-status-handler

Or via yarn:

yarn add react-form-status-handler

Usage

useFormStatus Hook

The useFormStatus hook provides state and functions to manage form statuses.

import React from 'react';
import { useFormStatus } from 'react-form-status-handler';

const MyForm = () => {
  const { status, message, setStatus, setMessage, resetStatus } = useFormStatus();

  // Your form logic here

  return (
    // Your form JSX here
  );
};

FormStatus Component

The FormStatus component displays the current form status based on the status and message props.

import React from 'react';
import { FormStatus } from 'react-form-status-handler';

const MyForm = () => {
  const { status, message } = useFormStatus();

  return (
    <div>
      {/* Your form elements */}
      <FormStatus status={status} message={message} />
    </div>
  );
};

Examples

Basic Example

import React from 'react';
import { useFormStatus, FormStatus } from 'react-form-status-handler';

const MyForm = () => {
  const { status, message, setStatus, setMessage, resetStatus } =
    useFormStatus();

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setStatus('loading');
    try {
      // Simulate form submission
      await new Promise((resolve) => setTimeout(resolve, 2000));
      setStatus('success');
      setMessage('Form submitted successfully!');
    } catch (error) {
      setStatus('error');
      setMessage('Form submission failed.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields */}
      <button type="submit">Submit</button>
      <FormStatus status={status} message={message} />
    </form>
  );
};

export default MyForm;

Custom Styling Example

You can customize the appearance of the FormStatus component by passing custom styles or by creating your own component that utilizes the useFormStatus hook.

import React from 'react';
import { useFormStatus } from 'react-form-status-handler';

const CustomFormStatus = ({ status, message }) => {
  if (status === 'idle') return null;

  const getStatusStyle = () => {
    switch (status) {
      case 'loading':
        return { color: 'blue' };
      case 'success':
        return { color: 'green' };
      case 'error':
        return { color: 'red' };
      default:
        return {};
    }
  };

  return (
    <div style={getStatusStyle()}>
      {status === 'loading' && <p>Loading...</p>}
      {status === 'success' && <p>{message || 'Success!'}</p>}
      {status === 'error' && <p>{message || 'An error occurred.'}</p>}
    </div>
  );
};

const MyForm = () => {
  const { status, message, setStatus, setMessage, resetStatus } =
    useFormStatus();

  const handleSubmit = async (event: React.FormEvent) => {
    event.preventDefault();
    setStatus('loading');
    try {
      // Simulate form submission
      await new Promise((resolve) => setTimeout(resolve, 2000));
      setStatus('success');
      setMessage('Form submitted successfully!');
    } catch (error) {
      setStatus('error');
      setMessage('Form submission failed.');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields */}
      <button type="submit">Submit</button>
      <CustomFormStatus status={status} message={message} />
    </form>
  );
};

export default MyForm;

API

useFormStatus

const { status, message, setStatus, setMessage, resetStatus } = useFormStatus();

• status: The current status of the form ('idle' | 'loading' | 'success' | 'error').
• message: The message associated with the current status.
• setStatus: Function to set the form status.
• setMessage: Function to set the form message.
• resetStatus: Function to reset the form status to 'idle' and clear the message.

FormStatus

<FormStatus status={status} message={message} />

• status: The current status of the form ('idle' | 'loading' | 'success' | 'error').
• message: The message to display for the current status.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

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