React Resizable Panels

screenshot of React Resizable Panels
react

Overview

The react-resizable-panels is a set of React components designed for creating resizable panel groups/layouts. It supports input methods such as mouse, touch, and keyboard via Window Splitter. The library offers features for persistent panel sizes, conditional rendering, and layout configuration.

Features

  • Resizable Panel Groups: Create resizable panel layouts for your React applications.
  • Supported Input Methods: Includes support for mouse, touch, and keyboard interactions.
  • Persistent Layouts: Panel groups with autoSaveId prop can save and restore layouts on mount.
  • Conditional Rendering: Handle layout and sizing problems with conditionally rendered panels.
  • Custom Styling: Style the resize handles using className or style props.
  • Server-Side Rendering (SSR) Support: Provide guidance on using persistent layouts with SSR to avoid layout flicker.
  • CSP Attribute and Cursor Styles: Includes methods to set the CSP "nonce" attribute and disable global cursor styles.
react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.