npm.io
1.0.11 • Published 3 years ago

my-react-modal

Licence
MIT
Version
1.0.11
Deps
1
Size
129 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

Component

logo(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

Keywords

reactmodal