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.