Modals-React-Components

Table of Contents

• Modals-React-Components
  • Table of Contents
  • General information
  • Prerequisites
  • Installation
  • API Reference
  • Usages
    • without children
    • with children

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
    • isShowing type of boolean
    • hide function for opening and closing
  • Optionnal
    • title can receive a string or component
    • children can receive one or more components, which will constitute the body
    • classNameBody if you want to add your own className for the Body
    • keydown iy you want to use event KeyDown to close Modal

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 App

with 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