Modals-React-Components
Table of Contents
General information
A Modal component that utilizes ReactDOM.createPortal(). A Portal in React is a component that allows rendering elements into a different component tree from where they are declared.
for more information see Portals in React doc
Prerequisites
-
-
-
or
Installation
To install, you can use npm or yarn:
$ npm install @fredmagione/modals-react-components
$ yarn add @fredmagione/modals-react-components
API Reference
- to initialise the modal, you need to import
const { isShowing, toggle } = useModal()
- the modal component has several optional and required props
- Required
-
isShowingtype of boolean -
hidefunction for opening and closing
-
- Optionnal
-
titlecan receive a string or component -
childrencan receive one or more components, which will constitute the body -
classNameBodyif you want to add your own className for the Body -
keydowniy you want to use event KeyDown to close Modal
-
- Required
Usages
without children
import { useModal } from '../Hooks/useModal'
import '../Styles/App.css'
import { Modal } from './modal'
function App() {
const { isShowing, toggle } = useModal()
return (
<div className="App">
<header className="App-header">
<button className="modal-toggle" onClick={toggle}>
Show modal
</button>
</header>
<Modal
isShowing={isShowing}
hide={toggle}
title='hello World!!'
keydown={{ active: true, key: 'Escape' }}
/>
</div>
)
}
export default Appwith children
import { useModal } from '../Hooks/useModal'
import '../Styles/App.css'
import { Modal } from './modal'
function App() {
const { isShowing, toggle } = useModal()
return (
<div className="App">
<header className="App-header">
<button className="modal-toggle" onClick={toggle}>
Show modal
</button>
</header>
<Modal
isShowing={isShowing}
hide={toggle}
title='hello World!!'
classNameBody="your class"
>
// do something
</Modal>
</div>
)
}
export default App