react-tailwind-flex-modal
v1.9.3
Published
A light Modal made with Tailwind
Downloads
15
Maintainers
Readme
A light Modal made with Tailwind
Install
npm install --save react-tailwind-flex-modal
Import the Modal and don't forget to import the css:
import {Modal} from 'react-tailwind-flex-modal'
import 'react-tailwind-flex-modal/dist/index.css'
Usage
react-tailwind-flex-modal allows you to make quickly 3 types of modal
Simple Modal
Pass your text like this:
const modalTitle = 'CONGRATULATIONS!'
const message = 'Your modal is working.'
const closeMessage = 'Close'
And choose a modal:
const currentModal = 'simpleModal'
Pass this in your modal props
<Modal
setShowModal={setShowModal}
currentModal={currentModal}
successTitle={modalTitle}
message={message}
closeMessage={closeMessage}
handleClose={handleClose}
...
Aproval Modal
Just add this in your Modal props
const currentModal = 'aprovalModal'
{showModal ?
<Modal
setShowModal={setShowModal} // boolean
currentModal={currentModal} // string
warningTitle={warningTitle} // must be a string
closeMessage={closeMessage} // must be a string
aprovalMessage={aprovalMessage} // must be a string
setShowModal={setShowModal} // boolean
warningMessage={message} // must be a string
warningIcon={warningIcon} // must be a string
handleClose={handleClose} // function
handleAproval={handleAproval} // function
/>
:
<div></div>
Form Modal
You can pass a component to the modal, just pass it as a prop and call it formComponent:
const currentModal = 'fomModal'
formComponent={formComponent}
Define the style of your modal, you can define a style for darkmode too. Default values are:
const modalBackground = 'bg-white'
const darkModalBackground = 'dark:bg-zinc-900'
const successTitleColor = 'text-lime-600'
const warningTitleColor = 'text-red-500'
const darkSuccessTitleColor = 'dark:text-red-500'
const messageTextColor = 'text-gray-500'
const aprovalButtonBgColor = 'bg-lime-600'
const darkAprovalButtonBgColor = 'dark:bg-lime-600'
const closeButtonBgColor = 'bg-red-600'
const buttonsTextColor = 'text-white'
By default the animation is setted on fade in up, you can choose fade-in-down or fade-in:
const animation = 'animate-fade-in'
Added
Close Modal with escape key or close button
License
MIT © Guillaume-da