r-modal-sf

npm github

Installation

npm i r-modal-sf

import { Modal } from 'r-modal-sf';

Example

Here is a simple example of r-modal-sf being used in an app

import React, { useState } from "react";
import { Modal } from "r-modal-sf";

export const App = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const toggleModal = () => {
    setModalOpen(!modalOpen);
  };
  return (
    <>
      <button onClick={toggleModal}>Open modal</button>

      <Modal
        content="test content"
        modalOpen={modalOpen}
        modalClose={toggleModal}
        buttonContent="X"
      />
    </>
  );
};

You can also use custom style

const customStyle = {
  overlay: {
    backgroundColor: "green",
  },
  content: {
    backgroundColor: "white",
    borderRadius: "10px",
  },
  close: {
    padding: "5px 17px",
    size: "14px",
    border: "none",
  },
};

<Modal
  content="test content"
  modalOpen={modalOpen}
  style={customStyle}
  modalClose={toggleModal}
  buttonContent="X"
/>;