Getting started

Installation

Install the vanilla core package for direct runtime control, or install the React wrapper for component-driven usage.

Install tiny-drawer

Use the core package in vanilla JavaScript or TypeScript projects.

npm

Import the class and stylesheet you need:

src/main.ts

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

Install tiny-drawer-react

For React and Next.js, install the wrapper package. It already includes tiny-drawer as a runtime dependency.

bash

npm install tiny-drawer-react

Import the packaged CSS once in your app:

app/layout.tsx

import "tiny-drawer-react/styles.css";

CDN usage for the core package

Add the published CSS and UMD bundle when you want a no-build HTML demo.

index.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>

What changed in 1.2.0

The current release keeps outside-click closing and upgrades scroll-to-full drawer behavior to an object-based onScrollFull API with nested backDrop, drawer, and scrollTargetcontrols. The docs pages below show the updated core options and React props.

The tiny-drawer page explains how scrollTarget moved into onScrollFull, and the tiny-drawer-react page shows the same shape in component props before you jump into the combined reference table.

Which package should you pick?

Use tiny-drawer when you want direct constructor and method control in a vanilla DOM app. Use tiny-drawer-react when your UI is already driven by React state and client components.