{"id":19153373,"url":"https://github.com/leetcode-opensource/react-simple-resizer","last_synced_at":"2026-02-23T20:46:55.357Z","repository":{"id":33614095,"uuid":"160013938","full_name":"LeetCode-OpenSource/react-simple-resizer","owner":"LeetCode-OpenSource","description":"🐙 An intuitive React component set for multi-column resizing","archived":false,"fork":false,"pushed_at":"2023-04-07T09:45:18.000Z","size":2935,"stargazers_count":69,"open_issues_count":26,"forks_count":10,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-10T17:06:11.645Z","etag":null,"topics":["react-component","resize","resizer"],"latest_commit_sha":null,"homepage":"https://leetcode-opensource.github.io/react-simple-resizer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LeetCode-OpenSource.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-12-02T04:38:46.000Z","updated_at":"2025-04-01T17:19:42.000Z","dependencies_parsed_at":"2024-06-18T18:43:13.163Z","dependency_job_id":"b8afcd3f-81e0-4a2b-9d87-e771a4806f5b","html_url":"https://github.com/LeetCode-OpenSource/react-simple-resizer","commit_stats":{"total_commits":242,"total_committers":4,"mean_commits":60.5,"dds":0.2644628099173554,"last_synced_commit":"d8e38ba8489e2f2de414f42eb3666b585a31dac4"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/LeetCode-OpenSource/react-simple-resizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Freact-simple-resizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Freact-simple-resizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Freact-simple-resizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Freact-simple-resizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LeetCode-OpenSource","download_url":"https://codeload.github.com/LeetCode-OpenSource/react-simple-resizer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LeetCode-OpenSource%2Freact-simple-resizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269957598,"owners_count":24503410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-11T02:00:10.019Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react-component","resize","resizer"],"created_at":"2024-11-09T08:22:52.752Z","updated_at":"2026-02-23T20:46:55.308Z","avatar_url":"https://github.com/LeetCode-OpenSource.png","language":"TypeScript","readme":"# react-simple-resizer \u0026middot; [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/LeetCode-OpenSource/react-simple-resizer/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](#contributing) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat)](https://github.com/prettier/prettier) [![npm version](https://img.shields.io/npm/v/react-simple-resizer.svg?style=flat)](https://www.npmjs.com/package/react-simple-resizer)\n\n\nAn intuitive React component set for multi-column(row) resizing. You could [customize the behavior of resizing](#customize-resize-behavior) in a very simple way. Works in every modern browser [which](https://caniuse.com/#feat=flexbox) supports [flexible box layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout).\n\n#### Table of Contents\n- [Installation](#installation)\n- [Examples](#examples)\n- [Components](#components)\n    - [Container](#container-)\n    - [Section](#section-)\n    - [Bar](#bar-)\n- [Customize resize behavior](#customize-resize-behavior)\n- [Contributing](#contributing)\n\n## Installation\nUsing [yarn](https://yarnpkg.com/):\n```bash\nyarn add react-simple-resizer\n```\n\nOr via [npm](https://docs.npmjs.com):\n```bash\nnpm install react-simple-resizer\n```\n\n## Examples\n\nHere is a minimal example for two-column layout:\n```jsx\nimport React from 'react';\nimport { Container, Section, Bar } from 'react-simple-resizer';\n\nexport default () =\u003e (\n  \u003cContainer style={{ height: '500px' }}\u003e\n    \u003cSection style={{ background: '#d3d3d3' }} minSize={100}/\u003e\n    \u003cBar size={10} style={{ background: '#888888', cursor: 'col-resize' }} /\u003e\n    \u003cSection style={{ background: '#d3d3d3' }} minSize={100} /\u003e\n  \u003c/Container\u003e\n);\n```\n\nWe have created several demos on CodeSandbox, check demos below:\n\n- [Simple demo](https://codesandbox.io/s/qkw1rxxq29)\n- [Make Section collapsible](https://codesandbox.io/s/1vpy7kz5j3)\n- [Multiple Section linkage effects](https://codesandbox.io/s/r51pv3qzpm)\n\n## Components\n\n### \\\u003cContainer \\/\\\u003e\n\nLiterally, it's the container of the other components.\n\n```typescript\nimport { Container } from 'react-simple-resizer';\n```\n\n#### Props\n```typescript\nimport { HTMLAttributes } from 'react';\n\ninterface ContainerProps extends HTMLAttributes\u003cHTMLDivElement\u003e {\n  vertical?: boolean;\n  onActivate?: () =\u003e void;\n  beforeApplyResizer?: (resizer: Resizer) =\u003e void;\n  afterResizing?: () =\u003e void;\n}\n```\n\n##### `vertical`\n\nDetermine whether using vertical layout or not, default is `false`.\n\n##### `onActivate`\n\nTriggered when any [`Bar`](#bar-) is activated. i.e, [onMouseDown](https://developer.mozilla.org/en/docs/Web/Events/mousedown) or [onTouchStart](https://developer.mozilla.org/en-US/docs/Web/Events/touchstart).\n\n##### `beforeApplyResizer`\n\nUsed to [customize resize behavior](#customize-resize-behavior). In this method, you __don't__ need to call [`applyResizer`](#applyresizer) to apply the resize result. Please note that you should not do any side effect on this method. If you want to do something after resizing, see [`afterResizing`](#afterresizing) below.\n\n##### `afterResizing`\n\nTriggered after a \u003ca name=\"resizing-section\"\u003e__resizing section__\u003c/a\u003e is completed, which means that it will be triggered after [onMouseUp](https://developer.mozilla.org/en-US/docs/Web/Events/mouseup) and [onTouchEnd](https://developer.mozilla.org/en-US/docs/Web/Events/touchend) events. If you want to do something after size of section has changed, use [`onSizeChanged`](#onsizechanged) props on the [`Section`](#section-) instead.\n\n#### Instance properties\n```typescript\nimport React from 'react';\n\nclass Container extends React.PureComponent\u003cContainerProps\u003e {\n    public getResizer(): Resizer\n    public applyResizer(resizer: Resizer): void\n}\n```\n##### `getResizer`\nUsed to get newest [`Resizer`](#customize-resize-behavior). But any change won't apply unless you pass the `Resizer` to `applyResizer`.\n\n##### `applyResizer`\nApply the passed `Resizer` to `Container`.\n\n---\n### \\\u003cSection \\/\\\u003e\n\n```typescript\nimport { Section } from 'react-simple-resizer';\n```\n\n#### Props\n```typescript\nimport { HTMLAttributes, RefObject } from 'react';\n\ninterface SectionProps extends HTMLAttributes\u003cHTMLDivElement\u003e {\n  size?: number;\n  defaultSize?: number;\n  maxSize?: number;\n  minSize?: number;\n  disableResponsive?: boolean;\n  onSizeChanged?: (currentSize: number) =\u003e void;\n  innerRef?: RefObject\u003cHTMLDivElement\u003e;\n}\n```\n##### `size`\nUsed to set `Section`'s size. If `size` is set, `Section` will ignore the value of `defaultSize`, `maxSize` and `minSize`.\n\n##### `defaultSize`\nUsed to set default size of `Section`.\n\n##### `maxSize`\nUsed to set max size of `Section`.\n\n##### `minSize`\nUsed to set min size of `Section`.\n\n##### `disableResponsive`\nEach `Section` is responsive as default, unless `size` exists. The `responsive` here means that `Section`'s size is related with `Container`'s size, if `Container`'s size turn smaller, the `Section`'s size also turn smaller automatically. Otherwise, changes of `Container` size won't affect the `Section` when `disableResponsive` is `true`.\n\n##### `onSizeChanged`\nWill be triggered each time its size has changed.\n\n##### `innerRef`\nUsed to get the actual DOM ref of `Section`.\n\n---\n### \\\u003cBar \\/\\\u003e\n\n```typescript\nimport { Bar } from 'react-simple-resizer';\n```\n\n#### Props\n```typescript\nimport { HTMLAttributes, RefObject } from 'react';\n\ninterface ExpandInteractiveArea {\n  top?: number;\n  left?: number;\n  right?: number;\n  bottom?: number;\n}\n\ninterface BarProps extends HTMLAttributes\u003cHTMLDivElement\u003e {\n  size: number;\n  expandInteractiveArea?: ExpandInteractiveArea;\n  onStatusChanged?: (isActive: boolean) =\u003e void;\n  onClick?: () =\u003e void;\n  innerRef?: RefObject\u003cHTMLDivElement\u003e;\n}\n```\n##### `size`\nRequired, used to set the size of `Bar`.\n\n##### `expandInteractiveArea`\nUsed to expand interactive area of `Bar`.\n\n##### `onStatusChanged`\nTriggered when the state of `Bar` has changed.\n\n##### `onClick`\nTriggered if there's no \"move\" events. The main difference between it and original `onClick` event is that __there is no parameters__ on _this_ `onClick`. You could also use it as a touch event on mobile platform, without 300ms click delay.\n\n##### `innerRef`\nUsed to get the actual DOM ref of `Bar`.\n\n## Customize resize behavior\nIf you want to customize behavior of resizing, then you have to know how to use `Resizer`.\n\nThere is two ways to get the `Resizer`. One is [`beforeApplyResizer`](#beforeapplyresizer) defined on the __props__ of `Container`, and the other is [`getResizer`](#getresizer) defined on the __instance__ of `Container`.\n\nBeware that you need __manually__ calling [`applyResizer`](#applyresizer) every time you want to apply the effect, except in `beforeApplyResizer`. Check demo [Make Section collapsible](https://codesandbox.io/s/1vpy7kz5j3) to see how `applyResizer` is used.\n\n```typescript\ninterface Resizer {\n  resizeSection: (indexOfSection: number, config: { toSize: number; preferMoveLeftBar?: boolean }) =\u003e void;\n  moveBar: (indexOfBar: number, config: { withOffset: number; }) =\u003e void;\n  discard: () =\u003e void;\n  isSectionResized: (indexOfSection: number) =\u003e boolean;\n  isBarActivated: (indexOfBar: number) =\u003e boolean;\n  getSectionSize: (indexOfSection: number) =\u003e number | -1;\n  getTotalSize: () =\u003e number;\n}\n```\n\n##### `resizeSection`\nUsed to set size of the nth `Section`.\nIn multi-column layout, there're several `Bar`s could change the `Section`'s size. Therefore, you could try to use the left side `Bar` to resizing by setting `preferMoveLeftBar`.\n\n##### `moveBar`\nUsed to move the nth `Bar` to resizing. \nIf the value of A is negative, move `Bar` to the left. When [`vertical`](#vertical) is `true`, move up.\n\n##### `discard`\nDiscard resizing at this time.\n\n##### `isSectionResized`\nUsed to determine whether the nth `Section`'s size is changed at current [resizing section](#user-content-resizing-section) or not.\n\n##### `isBarActivated`\nUsed to determine whether the nth `Bar` is active or not.\n\n##### `getSectionSize`\nUsed to get size of the nth `Section`. if there is no nth `Section`, return `-1`.\n\n##### `getTotalSize`\nUsed to get total size of all `Section`.\n\n\n\n## Contributing\nThe main purpose of this repository is to continue to evolve react-simple-resizer, making it faster, smaller and easier to use. We are grateful to the community for contributing bugfixes and improvements.\n\n#### About Demo\nFeel free to let us know that you have created some new customized resize behavior. You could create a PR to let more people see your works. Also, if you find some behaviors that you cannot create, let us know too.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleetcode-opensource%2Freact-simple-resizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleetcode-opensource%2Freact-simple-resizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleetcode-opensource%2Freact-simple-resizer/lists"}