@redshank/react-modal

NOTE: This package working with React 18.

This package was created due to the lack of really good options for modals in reactjs, this is a library with zero dependencies in which you can render modals from anywhere, either through the API or from its component. With a nice UI design.

How to install

Install from:

• npm install @redshank/react-modal

or

• yarn add @redshank/react-modal

How to use:

import css in first file to project

index.js

import '@redshank/react-modal/lib/styles/style.css';

Now use the API.

Notifications

import Modal from '@redshank/react-modal';

function App() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div>
      <button
        onClick={() => setIsOpen(true)}>
        Open
      </button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}>
        <h1>Title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur 
          adipisicing elit. Corporis esse expedita,
          libero maxime placeat quam sunt tenetur? 
          Eos illum laudantium nisi provident quaerat.
          Cupiditate dolorum eius natus neque nulla
          praesentium!</p>
      </Modal>
    </div>
  );
}

Notification Props

| prop | type | default | description | |:--------:|--------|:----------:|:-------------------------------------------------------------------------------------------------------------------------------:| | title | string | "" | Required. Title of notification | | message | string | "" | Required. Message of notification | | type | enum | "success" | Optional. defines the type of notification. "success", "info", "warning", "error" | | position | enum | "topRight" | Optional. defines the position of notification. "topRight", "topLeft", "topCenter", "bottomRight", "bottomLeft", "bottomCenter" | | duration | number | 7000 | Optional. Defines the time that the notification will be active on the screen |

Message Props

| prop | type | default | description | |:--------:|------------------|:-----------:|:-------------------------------------------------------------------------------------------------------------------------------:| | message | string | "" | Required. Message of notification | | type | enum | "success" | Optional. defines the type of notification. "success", "info", "warning", "error" | | position | enum | "topCenter" | Optional. defines the position of notification. "topRight", "topLeft", "topCenter", "bottomRight", "bottomLeft", "bottomCenter" | | duration | number | 7000 | Optional. Defines the time that the notification will be active on the screen | | key | number or string | - | Optional. Message key, useful to update the message. |

Notification Render

const render = ({
                  title,
                  message,
                  icon,
                  type,
                  id,
                  onRemove,
                  className,
                  style,
                  onClick
                }) => {
  return (
    <div style={style} className={className} onClick={onClick}>
      <h5>{title}</h5>
      <p>{message}</p>
    </div>
  );
};

Credits

Kevin Rivas (Author)

Portfolio Linkedin

Daniel Tejada (Collaborator)

Portfolio Linkedin

Create with Love ❤️ by Kevin Rivas.