Tailwind Redux Modal

A flexible and customizable modal component built with Redux for state management and Tailwind CSS for styling.

Installation

npm install tailwind-redux-modal

Features

• Redux-Based State Management: Seamlessly integrates with your Redux store.
• Customizable: Modal is highly customizable.
• Tailwind CSS Support: Fully customizable with Tailwind CSS classes.
• Flexible API: Control modals using hooks like useModal and reusable components like Modal.Header, Modal.Body, etc.
• Full-Screen Modals: Easily toggle between full-screen and standard modal sizes.

Usage

import React from 'react';
import { Modal } from 'react-modal-tailwind'

const ModalExample = () => {
  const { close } = useModal();
  return (
  
    <Modal>
      <Modal.Trigger>Open Modal</Modal.Trigger>
      <Modal.Content>
        <Modal.Header>Modal Header</Modal.Header>
        <Modal.Body>Modal Body Content</Modal.Body>
        <Modal.Footer>
          <button onClick={close}>Close Modal</button>
        </Modal.Footer>
      </Modal.Content>
    </Modal>
  );
};

export default ModalExample;

Example

import React from 'react';
import { Modal } from 'react-modal-tailwind'

export const ModalExample = () => {
  const { close, resize } = useModal()
  return (
    <Modal fullscreen {...props}>
      <Modal.Trigger className="bg-blue-500 text-white p-3 rounded-sm">
        Modal Trigger
      </Modal.Trigger>
      <Modal.Content>
        <Modal.Header>
          <h3 className='w-full text-center'>Modal Header</h3>
        </Modal.Header>
        <Modal.Body className='w-full text-center py-10'>
          <h3>Modal body</h3>
        </Modal.Body>
        <Modal.Footer>
          <div className='w-full justify-center flex gap-3'>
            <button 
              onClick={close} 
              className="bg-blue-500 flex-1 max-w-[250px] text-white px-3 py-2 rounded-sm"
            >
                Close
            </button>
            <button 
              onClick={resize} 
              className="bg-blue-500 flex-1 max-w-[250px] text-white px-3 py-2 rounded-sm"
            >
                Resize
            </button>
          </div>
        </Modal.Footer>
      </Modal.Content>
    </Modal>
  );
};

Modal Props

The <Modal /> component accepts the following props:

Props