Component

(https://github.com/Timothee-Picard/TimotheePicard_14_25112022)

Install

Install using npm i my-react-modal

Usage

In a React app, use the Modal components: import { Modal } from 'my-react-modal'

Modal props

| Name | Description | |-----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | isShowing | Type: Boolean State will display/hide modal | | hide | Type: Function Function that sets the state to false | | type | Type: String or null Can be success, warning or error | | title | Type: String or null Set the title of modal | | messages | Type: Array.<String> or null Displays children at the bottom of the modal. Can add class modal-action for button design and class success, warning or error for error type |

Children

children are added right-aligned in the footer we can add class to set custom design:

| class | Description | |----------------------|----------------------------------------------------------| | modal-action | Set design to modal button design | | modal-action success | Set design to modal button design and add success color | | modal-action error | Set design to modal button design and add error color | | modal-action warning | Set design to modal button design and add warning color |

Use it exemple

import {useState} from 'react'
import Modal from './lib'

const App = () => {
    const [isShowing, setIsShowing] = useState(false)
    return (
        <>
            <button onClick={() => setIsShowing(true)}>
                Open modal
            </button>
            <Modal isShowing={isShowing}
                   hide={() => setIsShowing(false)}
                   type="error"
                   title="Ma modal"
                   messages={["Modal message 1","My custom message 2"]}
            >
                <button className="modal-action success" onClick={() => setIsShowing(false)}>Return</button>
                <a href="#" className="modal-action">Home</a>
            </Modal>
        </>
    )
}

export default App