# jattac.libs.web.zest-responsive-layout

> A highly performant and flexible React component for building responsive layouts with a dynamic side pane and main content area. Features customizable desktop widths, bounce animations, and a configurable mobile breakpoint for seamless user experiences ac

Latest version **2.7.0** (published 2026-09-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install jattac.libs.web.zest-responsive-layout
pnpm add jattac.libs.web.zest-responsive-layout
yarn add jattac.libs.web.zest-responsive-layout
bun add jattac.libs.web.zest-responsive-layout
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.7.0 |
| Published | 2026-09-24 |
| First published | 2026-02-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.0.0 |
| Dependencies | 0 |
| Unpacked size | 155.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Jattac |
| Maintainers | nyingi |
| Keywords | react, responsive, layout, sidebar, pane, dynamic, ui, component, flexbox, css-modules, animations, typescript, jattac, zest, performance, ux, dx |

## Links

- npm: https://www.npmjs.com/package/jattac.libs.web.zest-responsive-layout
- Repository: https://github.com/nyingimaina/jattac.libs.web.zest-responsive-layout
- Homepage: https://github.com/nyingimaina/jattac.libs.web.zest-responsive-layout#readme
- Issues: https://github.com/nyingimaina/jattac.libs.web.zest-responsive-layout/issues
- npm.io page: https://npm.io/package/jattac.libs.web.zest-responsive-layout

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.7.0 (latest) — 2026-09-24
- 2.6.1 — 2026-06-30
- 2.6.0 — 2026-06-01
- 2.5.3 — 2026-06-01
- 2.5.2 — 2026-06-01
- 2.5.1 — 2026-06-01
- 2.5.0 — 2026-05-31
- 2.4.0 — 2026-05-31
- 2.3.1 — 2026-05-31
- 2.3.0 — 2026-05-31
- 2.2.10 — 2026-05-15
- 2.2.9 — 2026-05-15
- 2.2.8 — 2026-04-15
- 2.2.7 — 2026-03-12
- 2.2.6 — 2026-03-12
- … 23 more at https://npm.io/package/jattac.libs.web.zest-responsive-layout/versions

## README

# Zest Responsive Layout

A high-performance React component for building responsive layouts with a dynamic side pane and main content area. Handles responsive behavior, animations, desktop overlays, and nested side pane management.

---

## Key Features

- **Performance-First Architecture:** GPU-accelerated CSS transforms ensure consistent 60fps animations.
- **Responsive by Default:** Intelligent mobile-to-desktop transitions with a configurable breakpoint (default 768px).
- **Nested Side Pane Management:** Built-in side pane stacking via a context-driven API. Consumers can push and pop side panes without data loss or UI cramping.
- **Desktop Overlay System:** Optional dimming overlay with configurable click-to-close behavior.
- **Type-Safe:** Full TypeScript support with exported interfaces.

---

## Installation

```bash
npm install jattac.libs.web.zest-responsive-layout
```

---

## Table of Contents

- [Key Features](#key-features)
- [Installation](#installation)
- [Quick Start](#quick-start)
- [Class Component Support](#class-component-support)
- [Documentation](#documentation)

---

## Class Component Support

Class components can access the side pane stack API via the `withSidePane` higher-order component or the `SidePaneConsumer` render-prop component. Full documentation is available in the [API Reference](docs/api.md#class-component-support).

### withSidePane HOC

```tsx
import { withSidePane, SidePaneProvider, WithSidePaneProps } from 'jattac.libs.web.zest-responsive-layout';
import React from 'react';

interface MyProps extends WithSidePaneProps {}

class MyComponent extends React.Component<MyProps> {
  render() {
    return (
      <button onClick={() => this.props.openSidePane({ content: <div>Content</div> })}>
        Open (stack: {this.props.stackLength})
      </button>
    );
  }
}

export default withSidePane(MyComponent);
```

### SidePaneConsumer (render-prop)

```tsx
import { SidePaneConsumer } from 'jattac.libs.web.zest-responsive-layout';

class MyComponent extends React.Component {
  render() {
    return (
      <SidePaneConsumer>
        {({ openSidePane, stackLength }) => (
          <button onClick={() => openSidePane({ content: <div>Content</div> })}>
            Open (stack: {stackLength})
          </button>
        )}
      </SidePaneConsumer>
    );
  }
}
```

---

## Quick Start

> **v2.4.0:** `SidePaneProvider` must now be wrapped manually at the app root if using the stack API (`useSidePane`, `withSidePane`, `SidePaneConsumer`). If you only use the `sidePane` prop, the provider is optional. See [Breaking Changes](docs/breaking-changes.md#version-240-manual-provider-requirement).

```tsx
import { ZestResponsiveLayout, SidePaneProvider } from 'jattac.libs.web.zest-responsive-layout';
import { useState } from 'react';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <SidePaneProvider>
      <ZestResponsiveLayout
        sidePane={{
          visible: isOpen,
          title: "Navigation",
          content: <nav>Sidebar Content</nav>,
          onClose: () => setIsOpen(false)
        }}
      >
        <main>Main Application Content</main>
      </ZestResponsiveLayout>
    </SidePaneProvider>
  );
};
```

---

## Documentation

1. **[API Reference](docs/api.md)** - Prop specifications and type definitions.
2. **[Examples](docs/examples.md)** - Common usage patterns, including side pane stacking.
3. **[Features](docs/features.md)** - Detailed feature descriptions.
4. **[Configuration](docs/configuration.md)** - Customization and advanced setup.
5. **[Development Guide](docs/development.md)** - Contribution and build instructions.
6. **[Breaking Changes](docs/breaking-changes.md)** - Migration between major versions.

---
_Source: https://npm.io/package/jattac.libs.web.zest-responsive-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._