react-ksmodal v1.0.6

Install

npm install react-ksmodal

Usage

Single Modal

import { createKsmodal, useModal } from "react-ksmodal";

function App() {
    const Modal = createKsmodal();
    const { isVisible, showModal } = useModal();

    return (
        <div>
            // Provide the duration(ms) to maintain the modal as an argument to the 'showModal' function.
            <button onClick={() => showModal(1000)}>click</button>

            // Duration prop should be same as the argument to the 'showModal' function.
            <Modal
              isVisible={isVisible}
              duration={1000}
              message={"Clicked!"}
              backgroundColor="rgba(0,0,0,0.7)"
            />
        </div>
    );
}

export default App;

Multi Modals

If you need to use multiple modals in your project, you can create custom configurations for each of them. You can specify different names and settings for each modal.

1. Create Modal Instances:
   To use each modal, you create instances of the modals. You call the useModal hook to retrieve the state and functions for each modal.

2. Assign Modal Names:
   Give a clear name to each modal. This name is used to reference that specific modal.

import { createKsmodal, useModal } from "react-ksmodal";

function App() {
    const Modal = createKsmodal();

    const { isVisible: firstVisible, showModal: showFirstModal } = useModal();
    const { isVisible: secondVisible, showModal: showSecondModal } = useModal();

    return (
        <div>
            <button onClick={() => showFirstModal(2000)}>click</button>
            <button onClick={() => showSecondModal(1000)}>click</button>
            <Modal isVisible={firstVisible} duration={2000} message={"1st Btn Clicked!"} />
            <Modal isVisible={secondVisible} duration={1000} message={"2nd Btn Clicked!"} />
        </div>
    );
}

export default App;

Props Options

SizeValue: It's a string value that consists of a number followed by a size unit (either percentage or pixels). For example, it can take the form of "50%" or "200px".

Issue Reporting

If you've found a bug or have a feature request, please create an issue.