Gathering detailed insights and metrics for react-resizeable
Gathering detailed insights and metrics for react-resizeable
A react library that allows you to place custom resizeable grid components throughout your codebase.
Installations
npm install react-resizeableDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=10
Score
72.9
Supply Chain
98.5
Quality
75.5
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
2
TypeScript
HTML
TypeScript (96.83%)
HTML (3.17%)
Developer
Download Statistics
Total Downloads
69,966
Last Day
54
Last Week
335
Last Month
1,755
Last Year
20,198
GitHub Statistics
MIT License
14 Commits
1 Watchers
4 Branches
1 Contributors
Updated on Jun 10, 2020
Bundle Size
5.38 kB
Minified
2.17 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.2.6
Package Id
react-resizeable@0.2.6
Unpacked Size
82.47 kB
Size
20.67 kB
File Count
27
Total Downloads
Cumulative downloads
Total Downloads
69,966
Last Day
-51.8%
54
Compared to previous day
Last Week
-30.8%
335
Compared to previous week
Last Month
2.6%
1,755
Compared to previous month
Last Year
-10.4%
20,198
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
1
react-resizeable
Check out the demo.
A react library that allows you to place custom resizeable grid components throughout your codebase.
react-resizeable exports two components, Resizeable, the parent container and, Child, the wrapper for any children. See demo for examples.
Features
⏳ Saves you time by handling all the annoying event listeners for you.
⭐️ Flexibility to use proper semantic HTML (both components accept an as prop!)
🐑 Simplicity -- no need to pass multiple breakpoints, if each child has a minWidth we'll handle the wrap for you!
Requirement
To use react-resizeable, you must use styled-component > 4.1 as it is a peer dependency.
Installation
1$ yarn add react-resizeable 2// or 3$ npm i react-resizeable
Example
NOTE: most arguments are provided defaults (see Full API below) with the only required one being width on the <Child> component, however it is strongly recommended to include minWidth as well. (see demo for additional examples).
1import React from 'react'; 2import { Resizeable, Child } from 'react-resizeable'; 3 4const SomeComponent = () => ( 5 <Resizeable height="100vh" as="main"> 6 <Child resize={{ 7 width: '50%', 8 minWidth: '300px' 9 resizeable: true, 10 resizeDir: 'both' 11 }}> 12 <p> 13 Lorem ipsum dolor sit amet, consectetur adipiscing elit 14 </p> 15 </Child> 16 <Child resize={{ 17 as: 'article', 18 width: '50%', 19 minWidth: '300px', 20 height: '450px', 21 minHeight: '350px' 22 }}> 23 <p> 24 Lorem ipsum dolor sit amet, consectetur adipiscing elit 25 </p> 26 </Child> 27 </Resizeable> 28) 29 30export default SomeComponent;
Full API
<Parent />
Props:
1interface ResizeableProps { 2 flexDirection?: 'row' | 'column'; 3 height?: string; 4 as?: keyof JSX.IntrinsicElements; 5}
Defaults:
1 { 2 flexDirection: 'row', 3 height: '100%', 4 as: 'div', 5 }
<Child />
Note:
<Child />includes aforwardRefwrapper, so feel free to pass it arefif need be.- all additional props passed to child are forwarded to the styled component so you could pass a style prop to override things if you were so inclined.
Props:
1interface ChildProps { 2 resize: { 3 width: string; 4 resizeDir?: 'none' | 'both' | 'horizontal' | 'vertical' | 'initial' | 'inherit'; 5 resizeable?: boolean; 6 minWidth?: string; 7 height?: string; 8 minHeight?: string; 9 as?: keyof JSX.IntrinsicElements; 10 }; 11}
Defaults:
1 resize: { 2 width: 'n/a', 3 resizeable: false, 4 resizeDir: 'n/a', 5 as: 'div', 6 minWidth: 'min-content', 7 height: '100%', 8 minHeight: '100%', 9 }
License
MIT Licensed
Contributors
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
Found 0/14 approved changesets -- score normalized to 0
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/cdaz5/react-resizeable/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/cdaz5/react-resizeable/main.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/cdaz5/react-resizeable/main.yml/master?enable=pin
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Info: no jobLevel write permissions found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
64 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
- Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
2.5
/10
Last Scanned on 2025-05-12
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More