texteditor

A simple, flexible modal editor UI for React

DEMO: https://modal.linijart.eu/

🚀 Installation

npm install trotl-modal
# or
yarn add trotl-modal

Versions

1.0.1  => initial release

⚡ Quick Start

import Editor from "trotl-modal";

export default function Demo() {
  return (
    <div>

    </div>
  );
}

🛠 Features

📚 API Reference

Modal props

• initialPosition — determines where the modal is placed when it opens.

  • Type: string | { top: number, left: number }
  • Default: "center"
  • Accepted string values: "center", "top-center", "top-left", "top-right", "bottom-left", "bottom-center", "bottom-right", "left-center", "right-center".
  • Or pass explicit coordinates: { top: 10, left: 20 }.

• theme — optional string to control the color scheme of the modal and overlay.

  • Type: 'light' | 'dark'
  • Default: 'light'
  • When 'dark' is chosen the background, overlay and header colors adapt accordingly.

  Example:

  <Modal isOpen={open} initialPosition="top-left" theme="dark" onClose={...}>
    ...
  </Modal>

Drawer props

The Drawer component shares the same API as Modal, but is optimized for edge‑aligned panels. Its initialPosition defaults to "left" and accepts only the four cardinal positions ("left", "right", "top", "bottom") as well as the corner/center keywords and explicit coordinates.

• theme — same as the Modal prop; controls light/dark appearance. Default 'light'.

import { Drawer } from "trotl-modal";

<Drawer isOpen={open} initialPosition="right" theme="dark" onClose={...}>
  ...
</Drawer>

🌟 Context Hooks

🎨 Styling

🏆 License

MIT — free to use, modify, and share.