Modal window for React applications

A simple to use hook for creating a modal-window for react-applications

Documentation

The documentation will be ready soon. Until then, you can use demo codes or see an example.

Installation

To install, you can use npm or yarn:

$ npm install --save use-modal-element
$ yarn add use-modal-element

Features

  • ❤️ Beautiful design
  • ? Responsive screen: desktop, tablet, mobile
  • ⚡ Great performance
  • ? Easy configuration
  • ? NO dependencies

Usage

After installation, import the useModal file.
useModal is a hook (function) that returns a modal component and a toggle function

import useModal from "use-modal-element";

const [Modal, toggleModal] = useModal();
  • Modal – jsx component
  • toggleModal – the function that opens and closes the modal window

Configuration

All these configurations already written by default. But if you want to configure it yourself, here is a list of all available options. Configure it the way you want.

const [Modal, toggleModal] = useModal({
  withBackground: {
    closable: true,
    scrollable: false,
    customClassName: "my-background",
  },
  withCloseButton: {
    type: "default", // 'default', 'rounded', 'text'
    text: "",
    customClassName: "my-close-button",
  },
  withControlButton: {
    type: "default", // 'default', 'outlined', 'text'
    text: "Submit",
    customClassName: "my-control-button",
    action: () => console.log("your handler"),
  },
  additional: {
    customWrapperClassName: "",
    fullyShieldedMobile: true,
  },
});
  • withBackground – [bool / Object] if you need a dark background
    • closable – [bool] if true, outside click will close the modal
    • scrollable – [bool] if true, the background of the modal window will scroll
    • customClassName – [string] your custom class for the background design
  • withCloseButton – [bool / Object] if you need a close button
    • type – [string] default styled buttons
    • text – [string] text button content (if type is ‘text’)
    • customClassName – [string] your custom class for the close button design
  • withControlButton – [bool / Object] if you need a button
    • type – [string] default styled buttons
    • text – [string] button’s text value
    • customClassName – [string] your custom class for the button design
    • action – [Function] on click handler
  • additional – [Object] additional settings
    • customWrapperClassName – [string] your custom class for the modal content design
    • fullyShieldedMobile – [bool] if true, the modal will be fully shielded in the mobile screen

Finally

Once configured, you can add the Modal component anywhere in your code. And add the toggleModal to one of the event listeners
Also, the modal window has title and subtitle attributes with beautiful styles. They are not required, just use them if you want

return (
  <div className="home-page">
    <h2>Some title</h2>
    <p>Some text</p>

    <Modal title="Обратный звонок" subtitle="Перезвони в ближайшее время.">
      <div>
        <span>here must be you content</span>
      </div>
    </Modal>

    <button value="click" onClick={openModal} />
  </div>
);

Example

import useModal from "use-modal-element";

const App = (props) => {
  const [Modal, toggleModal] = useModal({
    withBackground: {
      closable: true,
      scrollable: false,
    },
    withCloseButton: {
      type: "rounded",
    },
    withControlButton: true,
  });

  return (
    <div className="home-page">
      <AnotherComponent />
      <Modal title="Modal window">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer arcu
          orci, mollis in est accumsan, ullamcorper rhoncus orci. In porttitor
          lorem magna, nec dictum.
        </p>
      </Modal>
      <button onClick={toggleModal} />
    </div>
  );
};

Demos

demo codes will be ready soon!

GitHub

View Github