summer-ui-react-modal v1.0.1

React Modal

Installation

npm i summer-ui-react-modal

Demo

https://k18382003.github.io/react-modal-demo/

Example

// App.js
import ReactModal from 'summer-ui-react-modal';
import { useState } from 'react';
import './App.css';
import './react-modal.css';

function App() {
  const [show, setShow] = useState(false);

  const handleDelete = (id) => {
    // You can make an API call
    // Example: const Response = await axios.post()
    alert(`The item with id: ${id} has been deleted`);
    setShow(false);
  };

  return (
    <main className='main'>
      <button onClick={() => setShow(true)}>Delete</button>
      <ReactModal
        setShowModal={setShow}
        showModal={show}
        message="Do you want to delete this item?"
        handleAction={() => handleDelete(param)}
        messageStyle="custom-msg" // Custom class name
        closeButtonStyle="custom-close-btn" // Custom class name
        actionButtonStyle="custom-action-btn" // Custom class name
        closeButtonText="Cancel" // Default text - No
        actionButtonText="Confirm" // Default text - Yes
      />
    </main>
  );
}

// react-modal.css
.custom-msg {
  color: palevioletred;
  font-size: 2rem;
  font-style: italic;
}

.custom-close-btn {
  background-color: green;
}

.custom-action-btn {
  background-color: brown;
}