React DatePicker, Loader, and Toaster

A simple React component library providing three essential UI components:

1. DatePicker - A customizable date picker component
2. Loader - A loading spinner with various sizes and colors
3. Toaster - A toast notification system

Installation

npm install react-datepicker-loader-toaster

or

yarn add react-datepicker-loader-toaster

Usage

DatePicker Component

The DatePicker must be wrapped in a DateAdapter component:

import React, { useState } from 'react';
import { DatePicker, DateAdapter } from 'react-datepicker-loader-toaster';

function MyComponent() {
  const [date, setDate] = useState(new Date());

  return (
    <DateAdapter>
      <DatePicker 
        label="Select Date" 
        value={date} 
        onChange={setDate} 
      />
    </DateAdapter>
  );
}

Loader Component

The Loader component can be used directly:

import { Loader } from 'react-datepicker-loader-toaster';

function LoadingComponent() {
  return (
    <div>
      <h2>Loading...</h2>
      <Loader size="medium" color="#0066ff" />
    </div>
  );
}

Toaster Component

The Toaster requires the ToasterProvider and useToaster hook:

import React from 'react';
import { ToasterProvider, useToaster } from 'react-datepicker-loader-toaster';

// Wrap your app with ToasterProvider
function App() {
  return (
    <ToasterProvider autoClose={5000}>
      <MyComponent />
    </ToasterProvider>
  );
}

// Use the toaster in any component
function MyComponent() {
  const toaster = useToaster();
  
  const showSuccessToast = () => {
    toaster.add({
      title: 'Success!',
      message: 'Operation completed successfully',
      type: 'success'
    });
  };
  
  return (
    <button onClick={showSuccessToast}>
      Show Success Toast
    </button>
  );
}

Props

DatePicker Props

| Prop | Type | Default | Description | |----------|----------|---------|----------------------------------------| | label | string | - | Label for the date picker | | value | Date | - | Selected date value | | onChange | function | - | Callback function for value changes |

Loader Props

| Prop | Type | Default | Description | |------------|---------|------------|----------------------------------| | size | string | 'medium' | Size of loader ('small', 'medium', 'large') | | color | string | '#0066ff' | Color of the loader | | fullscreen | boolean | false | Whether to display as fullscreen |

ToasterProvider Props

| Prop | Type | Default | Description | |-----------|---------|---------|---------------------------------------| | autoClose | number | 5000 | Auto-close time in milliseconds | | children | node | - | Child components |

Toast Configuration (used with toaster.add())

| Prop | Type | Default | Description | |---------|--------|---------|----------------------------------------| | title | string | - | Title of the toast notification | | message | string | - | Message content | | type | string | 'info' | Type of toast ('success', 'error', 'warning', 'info') |

License

MIT