resizable
2022.05.01
resizable element
#tools
use client /components/post/reExport re-resizable )
const [mouseCords, setMouseCords] = useState({ x: 0, y: 0 })
const [width, setWidth] = useState( )
const [height, setHeight] = useState( )
return (
<div>
<Resizable
id=
className=
defaultSize={{
width: ,
height:
}}
minWidth={200}
minHeight={100}
maxWidth={600}
maxHeight={800}
bounds={ }
enable={{
top: true, right: true, bottom: true, left: true, topRight: false, bottomRight: false, bottomLeft: false, topLeft: false
}}
onResize={(event, direction, refToElement, delta) => {
setDirection(direction)
setResizedBy(delta)
setMouseCords({ x: event.x, y: event.y })
setWidth(refToElement.style.width)
setHeight(refToElement.style.height)
}}
onResizeStart={() => { console.log( ) }}
onResizeStop={() => { console.log( ) }}
>
<div className= >
<span>Direction</span>
<span>Mouse</span>
<span>Resized by</span>
<span>Width</span>
<span>Height</span>
</div>
<div className= >
<span>{direction}</span>
<span>x={mouseCords.x} y={mouseCords.y}</span>
<span>w={resizedBy.width} h={resizedBy.height}</span>
<span>{width}</span>
<span>{height}</span>
</div>
</Resizable>
<style jsx global>{ }</style>
</div>
)
}
const postObj = {
title: ,
date: ,
tags: [ ],
desc: ,
body: (
<>
<ul>
<li>Resizable element</li>
<li><Lnk path= >https://www.npmjs.com/package/re-resizable</Lnk></li>
<li><Code bash>npm i re-resizable</Code></li>
</ul>
<ResizableDiv />
<Code block jsx>{ re-resizable )
const [mouseCords, setMouseCords] = useState({x: 0, y: 0})
const [width, setWidth] = useState( )
const [height, setHeight] = useState( )
return (
<div>
<Resizable
id=
className=
defaultSize={{
width: ,
height: ,
}}
minWidth={200}
minHeight={100}
maxWidth={600}
maxHeight={800}
bounds={ }
enable={{
top:true, right:true, bottom:true, left:true,
topRight:false, bottomRight:false, bottomLeft:false, topLeft:false
}}
onResize={(event, direction, refToElement, delta) => {
setDirection(direction)
setResizedBy(delta)
setMouseCords({x: event.x, y: event.y})
setWidth(refToElement.style.width)
setHeight(refToElement.style.height)
}}
onResizeStart={() => {console.log( )}}
onResizeStop={() => {console.log( )}}
>
<div className= >
<span>Direction</span>
<span>Mouse</span>
<span>Resized by</span>
<span>Width</span>
<span>Height</span>
</div>
<div className= >
<span>{direction}</span>
<span>x={mouseCords.x} y={mouseCords.y}</span>
<span>w={resizedBy.width} h={resizedBy.height}</span>
<span>{width}</span>
<span>{height}</span>
</div>
</Resizable>
<style jsx global>{\ }</style>
</div>
)
}