simplemodal-js v2.0.1

Simple Modal Js

A very customizable and simple library for creating modals in react.

• Written in React typescript
• More features are in progress
• Contributions are welcomed

Docs

• npm install :

npm install simplemodal-js

• Usage :

import Modal from "simplemodal-js/src/modal"

const ExampleComponent = () => {
    const [isOpen, setOpen] = useState(false)

    const handleModal = () => {
        setOpen((prev) => !prev)
    }
    
    return (
        <div>
            <button onClick={handleModal}>Open modal</button>
            <Modal isOpen={isOpen}>
                <h1>Hello World</h1>
                <button onClick={handleModal}>Close modal</button>
            </Modal>
        </div>
    )
}

export default ExmapleComponent;

• Info :

  • Child props are fully editable and close functions should be passed into the child prop as shown above.

  • Child props should be enclosed in divs and styled accordingly

    <Modal isOpen={isOpen}>
    <div className="exmapleClass">
    <h1>Hello World</h1>
    <button onClick={handleModal}></button>
    </div>
    </Modal>

• Props :