Getting started

What is Tiny Drawer?

tiny-drawer is the vanilla JavaScript and TypeScript package. tiny-drawer-react is the React wrapper that keeps the same runtime behavior while giving you props, refs, hooks, and the 1.2.0 option surface.

Package split

This docs site is intentionally centered on the two published npm packages instead of framework-agnostic theory pages. Start with the package you will actually install.

Core package

Use tiny-drawer directly in vanilla JavaScript or TypeScript, with CSS, methods, callbacks, and custom events.

React package

Use tiny-drawer-react for a Next.js-friendly component, ref API, and hook-based integration.

SSR guidance

Import both packages safely in SSR, then create drawer instances only from client-side effects.

Features & props

See the 1.2.0 scroll-full API updates plus the full core options and React props in one reference page.

CDN quick look

If you want a no-build demo for the vanilla package, load the published CSS and UMD bundle from unpkg:

html

<link
  rel="stylesheet"
  href="https://unpkg.com/tiny-drawer/dist/tiny-drawer.min.css"
/>
<script src="https://unpkg.com/tiny-drawer/dist/tiny-drawer.umd.js"></script>

Hello, drawer

The smallest useful example is a client-side vanilla drawer instance:

drawer.ts

import { TinyDrawer } from "tiny-drawer";
import "tiny-drawer/dist/tiny-drawer.css";

const drawer = new TinyDrawer("#app", {
  position: "bottom",
  size: "40%",
  minSize: "20%",
  maxSize: "90%",
  appendToBody: true,
  content: `
    <div class="demo-panel">
      <h2>Drawer Title</h2>
      <p>tiny-drawer mounts only when the browser is available.</p>
    </div>
  `,
});

document.querySelector("#openDrawer")?.addEventListener("click", () => {
  drawer.open();
});

What the docs cover

The integration pages focus on the published package surfaces: install commands, CSS entry points, SSR guidance, constructor usage, methods, callbacks, events, component props, ref controls, hook usage, and the 1.2.0 outside-click and scroll-full options.