react-rnd
react-rnd copied to clipboard
Bug: position x and y should accept string, so that we can convert to percentage
Overview of the problem
I am creating a page builder which requires to be responsive in landscape which is not possible by default position in PX, need to convert to percentage(%) - however x,y doesn't accept string Just number are you kidding me.
I'm using react-rnd 9.0.4 [x.x.x]
My browser is: Brave
Reproduced project
https://codesandbox.io/s/jovial-curie-05cvu?file=/src/index.js
Description
Need to accept string for x and y
Expected behavior
transform:translate(10%,10%)
Actual behavior
transform:translate(10px,10px)
Did find workaround this by, converting px to percentage and then using static height/width to convert percentage to relative px...still this is an issue
here is what i did to solve this issue
landscapePostionX = posx => {
// In Landscape width is 1024px & Height Is 1024
// Convert to percentage Value then to pexel relevant to landscape with
const posxpercentage = (posx / 768) * 100 // 768 is portrait width
const converted = (1024 * posxpercentage) / 100 // 1024 is landscape width
return converted
}
<Rnd
bounds="parent"
disableDragging={isEditor}
enableUserSelectHack={false}
default={{
x: isLandScape
? this.landscapePostionX(node.params.x)
: node.params.x,
y: isLandScape
? this.landscapePostionY(node.params.y)
: this.checkY(node.params),
width: `${node.params.width}`,
height: `${node.params.height}`
}}
May I ask what is node.params.x
and where this value is coming?