JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 75
  • Score
    100M100P100Q72155F
  • License MIT

Lightweight, strongly typed resizable panel component using react hooks

Package Exports

  • react-hook-resize-panel
  • react-hook-resize-panel/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-hook-resize-panel) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Hook MathJax

npm version

Dead simple resizable panel- only 100 lines of code. Lightweight, strongly typed package with almost no dependencies. It uses React Grid Layout and React Hooks to construct a resizable panel. For more details, take a look at the example project (which contains code for the gif below) or the live demo of the example project.

Example of usage

Install

yarn add react-hook-resize-panel

Usage

Basic inline display

import {
  ResizeContent,
  randleLeft,
  ResizeHandleRight,
  ResizePanel,
} from "react-hook-resize-panel";

export default function App() {
  return (
    <div style={{ flexFlow: "row nowrap", flexGrow: 1, display: "flex" }}>
      <ResizePanel initialWidth={300}>
        <ResizeContent style={{ backgroundColor: "#283430" }} />
        <ResizeHandleRight>
          <div
            style={{
              cursor: "col-resize",
              width: 5,
              backgroundColor: "black",
            }}
          />
        </ResizeHandleRight>
      </ResizePanel>

      <div style={{ flexGrow: 1, backgroundColor: "#34282c" }} />

      <ResizePanel initialWidth={300}>
        <ResizeHandleLeft>
          <div
            style={{
              cursor: "col-resize",
              width: 5,
              backgroundColor: "black",
            }}
          />
        </ResizeHandleLeft>
        <ResizeContent style={{ backgroundColor: "#283430" }} />
      </ResizePanel>
      <div />
    </div>
  );
}

API

ResizePanel props:

initialWidth Number, required

  • Sets initial width of panel
  • Does not currently support responsive / percentage values

ResizeContent props:

  • Will patch panel's width into style prop
  • Passes all props directly into a <div/>

ResizeHandleRight props:

  • Will shrink <ResizeContent/> when dragged to the left and grow <ResizeContent/> when dragged to the right
  • Passed directly to react-draggable's DraggableCore component
  • See docs here for valid options: DraggableCore

ResizeHandleLeft props:

  • Will shrink <ResizeContent/> when dragged to the right and grow <ResizeContent/> when dragged to the left
  • Passed directly to react-draggable's DraggableCore component
  • See docs here for valid options: DraggableCore