Gathering detailed insights and metrics for react-layer-handles
Gathering detailed insights and metrics for react-layer-handles
A simple utility that allows you to add handles to your React components.
Installations
npm install react-layer-handlesDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Min. Node Version
>=8
Score
67.3
Supply Chain
93.7
Quality
74.9
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Languages
3
JavaScript
HTML
CSS
JavaScript (91%)
HTML (4.54%)
CSS (4.45%)
Developer
colshacol
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
9 Commits
1 Forks
1 Watchers
41 Branches
1 Contributors
Updated on Feb 09, 2020
Maintainers
1
Package Meta Information
Latest Version
0.0.5
Package Id
react-layer-handles@0.0.5
Unpacked Size
93.13 kB
Size
16.84 kB
File Count
8
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
3
Dev Dependencies
30
@babel/core@babel/plugin-external-helpers@babel/preset-env@babel/preset-react@svgr/rollupbabel-corebabel-eslintbabel-plugin-external-helpersbabel-preset-envbabel-preset-reactcross-enveslinteslint-config-standardeslint-config-standard-reacteslint-plugin-importeslint-plugin-nodeeslint-plugin-promiseeslint-plugin-reacteslint-plugin-standardgh-pagesreactreact-domreact-scriptsrolluprollup-plugin-babelrollup-plugin-commonjsrollup-plugin-node-resolverollup-plugin-peer-deps-externalrollup-plugin-postcssrollup-plugin-url
react-layer-handles [WIP]
Overview
react-layer-handles is a simple utility that allows you to add handles to your React components. It is meant to provide just the basic functionality of showing handles and to be extended with the userLayerHandles hook to provide more features.
Install
1yarn add react-layer-handles
Usage
1import { LayerHandlesProvider, useLayerHandles } from "react-layer-handles";
1export const App = () => { 2 return ( 3 <LayerHandlesProvider 4 // default props show here 5 dataAttribute="data-layer-id" 6 handleOffsetX={8} 7 handleOffsetY={8} 8 handleWidth={8} 9 handleHeight={8} 10 handleBorderRadius={12} 11 > 12 <div className="App"> 13 <Text layerId="01234" /> 14 </div> 15 </LayerHandlesProvider> 16 ); 17};
1// just to show the component can have layer handles 2// attached no matter where it is positioned. 3const TEXT_LAYER_STYLE = { 4 position: "absolute", 5 top: 222, 6 left: 222, 7 background: "rgba(0,0,0,0.1)" 8}; 9 10const Text = props => { 11 // subscribe to the store. 12 const layers = useLayerHandles(); 13 const isSelected = layers.isSelected(props.layerId); 14 15 // toggle layerHandles on when this component is clicked. 16 const onClick = () => { 17 if (!isSelected) { 18 layers.setSelectedLayerId(props.layerId); 19 } 20 }; 21 22 // react-layer-handles uses the data-layer-id attribute by default. 23 // be sure to give this attribute to your elements or it will not work. 24 return ( 25 <p onClick={onClick} data-layer-id={props.layerId} style={TEXT_LAYER_STYLE}> 26 Foo bar baz. 27 </p> 28 ); 29};
Props
LayerHandlesProvider Props
dataAttribute
Type: string
Required: false
Default: 'data-layer-id'
Used to select elements from the DOM to create handles around.
handleOffset
Type: number
Required: false
Default: 8
Pushes the handles away from the content they are related to. For example, with the default value of 8, the top left handle will be 8px above and 8px left of the top/left coordinates of the content it is attached to. The bottom right handle will be pushed to the right 8px and down 8px from the bottom right corner of the content it is attached to.
cornerHandleWidth
Type: number
Required: false
Default: 8
Controls the width of the topLeft, topRight, bottomRight, and bottomLeft corner handles.
cornerHandleHeight
Type: number
Required: false
Default: 8
Controls the height of the topLeft, topRight, bottomRight, and bottomLeft corner handles.
borderHandleThickness
Type: number
Required: false
Default: 1
Controls the thickness of the top, right, bottom, and left handles.
Values
useLayerHandles (hook)
The useLayerHandles hook gives you access to the main store that powers react-layer-handles. The following descriptions are what values/methods you can access when using this hook.
selectedLayerId
Type: string
The id of the currently selected layer. If there is no selected layer, undefined.
setSelectedLayerId
Type: function(id: string): undefined
A method to set the currently selected layer id. Returns nothing.
isSelected
Type: function(id: string): boolean
A method to check if a specific id is currently selected. Returns a boolean, true or false.
layerBounds
Type: Object
The currently selected element's getBoundingRectClient values with some additional values as helpers. (top, left, right, bottom, height, width, etc.)
topHandleRef
Type: ref
A React ref for the top handle. Can be used to add event listeners, etc.
rightHandleRef
Type: ref
A React ref for the right handle. Can be used to add event listeners, etc.
bottomHandleRef
Type: ref
A React ref for the bottom handle. Can be used to add event listeners, etc.
leftHandleRef
Type: ref
A React ref for the left handle. Can be used to add event listeners, etc.
topRightHandleRef
Type: ref
A React ref for the top right handle. Can be used to add event listeners, etc.
topLeftHandleRef
Type: ref
A React ref for the top left handle. Can be used to add event listeners, etc.
bottomRightHandleRef
Type: ref
A React ref for the bottom right handle. Can be used to add event listeners, etc.
bottomLeftHandleRef
Type: ref
A React ref for the bottom left handle. Can be used to add event listeners, etc.
Styling
Each handle has a shared className, _reactLayerHandle that can be used to style the handles yourself. In addition to this shared className, the following classNames are given to the corresponding handles and can also be manipulated with global CSS or JS.
_topLeftReactLayerHandle
_topRightReactLayerHandle
_bottomRightReactLayerHandle
_bottomLeftReactLayerHandle
_topReactLayerHandle
_rightReactLayerHandle
_bottomReactLayerHandle
_leftReactLayerHandle
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 0/9 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
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
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
108 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-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- 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-pxg6-pf52-xh8x
- 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-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- 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-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- 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-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- 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-r6rj-9ch6-g264
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- 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-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
- Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- 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-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- 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-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
Score
1.3
/10
Last Scanned on 2025-07-14
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