hicones-sweet-modal
v0.0.1-beta
Published
A flexible modal library for React
Downloads
9
Readme
React Sweet Modal
Sweet Modal React is a lightweight, customizable modal library for React applications. It provides an easy-to-use API for showing modals while allowing full customization of the modal's appearance and behavior.
This library is inspired by the simplicity and flexibility of shadcn's Sonner toast library and the powerful features of SweetAlert2. We've combined these inspirations to create a modal system that is both easy to use and highly customizable.
Features
- Simple API for showing and closing modals
- Customizable modal components
- TypeScript support
- Lightweight with minimal dependencies
- Easy integration with existing React projects
Installation
Install the package using npm:
npm install sweet-modal-react
Or using yarn:
yarn add sweet-modal-react
Usage
Basic Usage
- Wrap your app with the
ModalContainer
component:
import { ModalContainer } from 'sweet-modal-react';
import CustomModal from './CustomModal';
function App() {
return (
<div>
{/* Your app content */}
<ModalContainer modalComponent={CustomModal} />
</div>
);
}
- Create a custom modal component:
import React from 'react';
const CustomModal = ({ modal, onClose }) => (
<div className="modal">
<h2>{modal.title}</h2>
<p>{modal.content}</p>
<button onClick={onClose}>Close</button>
</div>
);
export default CustomModal;
- Use the
showModal
function to display modals:
import { showModal } from 'sweet-modal-react';
function MyComponent() {
const handleClick = () => {
showModal({
title: 'Hello',
content: 'This is a modal!',
// Any other props you want to pass to your custom modal
});
};
return <button onClick={handleClick}>Show Modal</button>;
}
Advanced Usage
You can create multiple types of modals by using different custom components:
import { ModalContainer, showModal } from 'sweet-modal-react';
import ConfirmationModal from './ConfirmationModal';
import InfoModal from './InfoModal';
function App() {
const showConfirmation = () => {
showModal({
type: 'confirmation',
title: 'Confirm Action',
content: 'Are you sure you want to proceed?',
onConfirm: () => console.log('Confirmed'),
onCancel: () => console.log('Cancelled'),
});
};
const showInfo = () => {
showModal({
type: 'info',
title: 'Information',
content: 'This is some important information.',
});
};
const modalComponent = (props) => {
switch (props.modal.type) {
case 'confirmation':
return <ConfirmationModal {...props} />;
case 'info':
return <InfoModal {...props} />;
default:
return null;
}
};
return (
<div>
<button onClick={showConfirmation}>Show Confirmation</button>
<button onClick={showInfo}>Show Info</button>
<ModalContainer modalComponent={modalComponent} />
</div>
);
}
API
showModal(options: ModalOptions): string
Shows a modal with the given options. Returns the modal's unique ID.
closeModal(id: string): void
Closes the modal with the given ID.
<ModalContainer modalComponent={YourCustomModal} />
A component that manages the rendering of modals. It should be placed at the root of your app.
TypeScript Support
This library includes TypeScript definitions. You can import types like this:
import { ModalOptions, ModalItem, ModalComponent } from 'sweet-modal-react';
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Author
Henrique Almeida