use-modal-element v1.4.8

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

Quick start

• Installation
• Documentation
• Usage
• Example
• Demos

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 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 are set 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="Some title" subtitle="subtitle">
      <div>
        <span>here must be you content</span>
      </div>
    </Modal>

    <button value="click" onClick={toggleModal} />
  </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

Example demo