tchiki-modal-react v5.0.5

tchiki-modal-react

Description

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

Table of Contents

• Installation
• Properties
• Example

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 :

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;