@peterpalmer/react-offcanvas NPM

react-offcanvas

Reusable off‑canvas panel component for React and TypeScript, inspired by Bootstrap’s Offcanvas but fully framework‑agnostic.

✨ Features

Positions: start, end, top, or bottom.
Built‑in backdrop & body‑scroll locking.
Close via outside click or ESC.
Customisable size, animation duration & easing.
SSR‑friendly (Next.js, Remix …).
Zero dependencies apart from react and react‑dom.

📦 Installation

npm i react-offcanvas
# or
yarn add react-offcanvas
# or
pnpm add react-offcanvas
# or
bun add react-offcanvas

Peer‑dependencies: react >= 18, react-dom >= 18.

🚀 Quick start

import React, { useState } from "react";
import OffCanvas from "react-offcanvas";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open menu</button>

      <OffCanvas
        isOpen={open}
        onClose={() => setOpen(false)}
        placement="end" // end (default)
        width="300px" // optional
        animationDuration={400} // optional
      >
        <nav style={{ padding: 24 }}>{/* ...your content... */}</nav>
      </OffCanvas>
    </>
  );
}

🔧 Props

Prop	Type	Default	Description
`isOpen`	boolean	—	Controls visibility.
`onClose`	() => void	—	Callback for closing.
`placement`	`'start'	'end'	'top'	'bottom'`	`'end'`	Lado o borde donde aparece.
`backdrop`	boolean	`true`	Shows darkened backdrop.
`width`	string	`'320px'`	Width for `start`/`end`.
`height`	string	`'320px'`	Height for `top`/`bottom`.
`animationDuration`	number (ms)	`450`	Animation duration.
`easing`	string (CSS timing‑function)	`cubic-bezier(0.25,0.8,0.25,1)`	Easing function.
`className`	string	`""`	Extra classes for the panel.
`children`	React.ReactNode	—	Contenido dentro del panel.

🎨 Personalización rápida

All styles are injected in a <style> tag to avoid dependencies. If you need a more elaborate theme, add a more specific selector or use the className prop to apply your own Tailwind/CSS-in-JS classes.

🛠️ Build from source

# clone the repo
git clone https://github.com/peter-palmer/react-offcanvas.git && cd react-offcanvas

# install deps
pnpm install # or npm / yarn

# build     -> dist/
pnpm build

# ejecuta ejemplos locales
pnpm dev