@redshank/react-modal v1.0.3

@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

Message Props

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.