A package for the project 14 of OpenClassrooms called HrNet
npm install hrnet-modal-p14A simple and flexible modal component for React applications.
``bash`
npm install hrnet-modal-packageor
yarn add hrnet-modal-package
`tsx
import {
Modal,
ModalTrigger,
ModalContent,
useModal,
} from 'hrnet-modal-package';
// Basic usage Your modal content goes here
function MyComponent() {
return (
Modal Title
);
}
// Controlled usage
function ControlledModal() {
const [isOpen, setIsOpen] = useState(false);
return ( This modal is controlled by the parent component
Controlled Modal
);
}
// Using the useModal hook
function CustomModal() {
const { isOpen, openModal, closeModal } = useModal();
return (
Using the useModal hook for more control
Props
$3
-
(optional): boolean - Controls the modal's visibility
- onClose (optional): () => void - Callback when modal is closed
- variant (optional): 'primary' | 'secondary' - Modal style variant
- className (optional): string - Additional CSS classes$3
-
className (optional): string - Additional CSS classes for the content container$3
-
children`: ReactNode - The element that triggers the modal