A simple utility that allows you to add handles to your React components.
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.
yarn add react-layer-handles
import { LayerHandlesProvider, useLayerHandles } from "react-layer-handles";
export const App = () => {
return (
<LayerHandlesProvider
// default props show here
dataAttribute="data-layer-id"
handleOffsetX={8}
handleOffsetY={8}
handleWidth={8}
handleHeight={8}
handleBorderRadius={12}
>
<div className="App">
<Text layerId="01234" />
</div>
</LayerHandlesProvider>
);
};
// just to show the component can have layer handles
// attached no matter where it is positioned.
const TEXT_LAYER_STYLE = {
position: "absolute",
top: 222,
left: 222,
background: "rgba(0,0,0,0.1)"
};
const Text = props => {
// subscribe to the store.
const layers = useLayerHandles();
const isSelected = layers.isSelected(props.layerId);
// toggle layerHandles on when this component is clicked.
const onClick = () => {
if (!isSelected) {
layers.setSelectedLayerId(props.layerId);
}
};
// react-layer-handles uses the data-layer-id attribute by default.
// be sure to give this attribute to your elements or it will not work.
return (
<p onClick={onClick} data-layer-id={props.layerId} style={TEXT_LAYER_STYLE}>
Foo bar baz.
</p>
);
};
Type: string
Required: false
Default: 'data-layer-id'
Used to select elements from the DOM to create handles around.
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.
Type: number
Required: false
Default: 8
Controls the width of the topLeft, topRight, bottomRight, and bottomLeft corner handles.
Type: number
Required: false
Default: 8
Controls the height of the topLeft, topRight, bottomRight, and bottomLeft corner handles.
Type: number
Required: false
Default: 1
Controls the thickness of the top, right, bottom, and left handles.
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.
Type: string
The id of the currently selected layer. If there is no selected layer, undefined
.
Type: function(id: string): undefined
A method to set the currently selected layer id. Returns nothing.
Type: function(id: string): boolean
A method to check if a specific id is currently selected. Returns a boolean
, true or false.
Type: Object
The currently selected element's getBoundingRectClient
values with some additional values as helpers. (top
, left
, right
, bottom
, height
, width
, etc.)
Type: ref
A React ref
for the top handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the right handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the bottom handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the left handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the top right handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the top left handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the bottom right handle. Can be used to add event listeners, etc.
Type: ref
A React ref
for the bottom left handle. Can be used to add event listeners, etc.
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