npm.io
5.0.5 • Published 3 years ago

tchiki-modal-react

Licence
ISC
Version
5.0.5
Deps
3
Size
16 kB
Vulns
0
Weekly
0
SummaryDependencyVersions

tchiki-modal-react

Description

Just another modal plugin for React. Supports ARIA attributes and is customisable by inline CSS styles.

Table of Contents

Installation

Node version: v18.17.1

To install, you can use npm :

$ npm install tchiki-modal-react

Properties

Here is a full list of properties accepted by the plugin :

Prop Type Description Default Value
isOpen boolean Indicates whether the modal is open or closed. -
onClose () => void Function called when the modal is closed. -
closeButton React.ReactNode Custom React node for the modal's close button. X
style object Object containing custom styles for the modal. -
style.backdrop React.CSSProperties Custom styles for the modal backdrop. { position: "fixed", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "rgba(0, 0, 0, 0.5)", zIndex: 9998 }
style.modal React.CSSProperties Custom styles for the modal itself. { position: "relative", color: "#000", backgroundColor: "#fff", padding: "20px", borderRadius: "8px", zIndex: 9999 }
style.close React.CSSProperties Custom styles for the modal's close button. { position: "absolute", top: "10px", right: "10px", cursor: "pointer" }

Example

Here is a simple example of tchiki-modal-react being used in an app with some custom styles and focusable input elements within the modal content:

import { useState } from "react";
import { Modal } from "tchiki-modal-react";

const customStyles = {
  backdrop: {
    backgroundColor: "rgba(0, 0, 0, 0.8)",
  },
  modal: {
    backgroundColor: "rgb(207, 255, 229)",
    height: "500px",
  },
  close: {
    backgroundColor: "#3EB489",
    width: "100px",
  },
};

const closeContent = <span>Close</span>;

function App() {
  const [isOpen, setIsOpen] = useState(false);

  const handleOpenModal = () => {
    setIsOpen(true);
  };

  const handleCloseModal = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpenModal}>Open Modal</button>

      <Modal
        isOpen={isOpen}
        onClose={handleCloseModal}
        closeButton={closeContent}
        style={customStyles}
      >
        <h1>It's a modal</h1>
        <p>An exemple of tchiki-modal-react.</p>
        <form
          style={{
            height: "300px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-around",
          }}
        >
          <input />
          <button>tab navigation</button>
          <button>stays</button>
          <button>inside</button>
          <button>the modal</button>
        </form>
      </Modal>
    </div>
  );
}

export default App;

Keywords

reactreactjsdialogmodal