everest_modal v1.0.1
Everest Modal
About
Everest Modal is a simple React modal that uses the HTML <dialog>
element and relies on MUI and Material Icons for styling.
Installation
npm i everest_modal
How to use
import { EverestModal } from "everest_modal"
import "everest_modal/dist/style.css"
const App = () => {
const [isEverestModalOpen, setIsEverestModalOpen] = useState(false)
return (
<>
<button onClick={() => setIsEverestModalOpen(true)}>Open Modal</button>
<EverestModal
isOpen={isEverestModalOpen}
setIsOpen={setIsEverestModalOpen}
/>
</>
)
}
export default App
How to use: in detail
Everest Modal relies on React's state paradigm to function. Therefore, to use Everest Modal in your project you need to set up state management with React's useState()
hook in the component that you want to handle Everest Modal's state. The state of Everest Modal is very simple: a boolean that determines whether the modal is open or closed, and a state-setter function for setting this boolean value based on user interactions with the interface. The initial state should be set to false
:
const [isEverestModalOpen, setIsEverestModalOpen] = useState(false)
The stateful variable isEverestModalOpen
and the state-setter function setIsEverestModalOpen
must be passed into the component instance via props. This is a required step:
<EverestModal
isOpen={isEverestModalOpen}
setIsOpen={setIsEverestModalOpen}
/>
Everest Modal can be used without any CSS styling, but you can choose to use the styles that come with the Everest Modal package by importing the everest_modal/dist/style.css
file into the component that uses Everest Modal:
import "everest_modal/dist/style.css"
Props
Everest Modal can be customized in several ways using props.
isOpen
(required) - boolean
Controls the visibility of the modal.
setIsOpen
(required) - function
The is a state-setter function that you pass to your Everest Modal instance from the component that manages the modal's state.
headingText
- string default: null
The text that appears in the header section of the modal. If not provided, the heading element in the modal will not render at all.
bodyText
- string default: null
The text that appears in the body section of the modal. If not provided, the paragraph element in the modal will render without inner content (a tag without content).
closeButtonType
- string default: "button"
Switches button type between a regular button with text and a button with a cross icon.
closeButtonText
- string default: "Close"
This option only applies if the closeButtonType
is set to "button". The modal is rendered with a button that closes it on click. This property allows to customize the text inside this button.
Other features
The modal can be closed by pressing the ESC
key.