2.1.0 • Published 3 years ago
nice-react-modal v2.1.0
a simple react modal component
Install
npm i nice-react-modal
components available
import {Modal, ModalBody, ModalTitle, ModalFooter} from 'nice-react-modal';
Usage
example of report user modal
// ReportUserModal.js file
import React from 'react'
import { Modal, ModalTitle, ModalBody, ModalFooter } from 'nice-react-modal'
interface Props {
onClose: () => void
}
export default function ReportUserModal({ onClose }: Props) {
return (
<Modal onClose={onClose}>
<ModalTitle>Report</ModalTitle>
<ModalBody>
<form id="reportForm">
<p style={{ textAlign: 'center' }}>Are you sure you want to report this user ?</p>
</form>
</ModalBody>
<ModalFooter>
<span className="px-5 py-2 bg-gray-200 text-gray-600 hover:bg-gray-300 transition rounded-full cursor-pointer" onClick={onClose}> Cancel </span>
<button type="submit" className="px-5 py-2 bg-red-500 hover:bg-red-600 transition text-white rounded-full" form="reportForm"> Yes, report </button>
</ModalFooter>
</Modal>
)
}
// App.js file
import { useState } from "react";
import ReportUserModal from './components/ReportUserModal'
function App() {
const [isReportModalOpen, setIsReportModalOpen] = useState(false);
return (
<div>
<span onClick={() => setIsReportModalOpen(true)}> Report user </span>
{isReportModalOpen && <ReportUserModal onClose={() => setIsReportModalOpen(false)} />}
</div>
);
}
you can find the other examples in demo, in the github repo
Props
Modal
- onClose
() => void
- size?
"md" | "lg"
- darkMode?
boolean
default is false