Initial position of Rnd component from bottom and right side

[iamtekson]

Overview of the problem

I'm using react-rnd latest version and I am looking for settting the initial postion of the Rnd component from right and bottom direction. As explained in the documentation, the position of Rnd is always from left (x) and top (y).

My browser is: Chrome

Reproduced project

https://codesandbox.io/s/y3997qply9

Description

Is there any way to set the position of the Rnd component from the right and bottom direction?

I tried to set the custom style in the Rnd component as below,

const rndStyle = {
      zIndex: "1000",
      left: "auto",
      right: "10px",
      bottom: "10px",
      top: "auto",
    };

<Rnd
    style={style}
    default={{
      x: 0,
      y: 0,
      width: 320,
      height: 200
    }}
  >
    Rnd
  </Rnd>

When I inspect the element, the component css was updated according to my rndStyle, but it doesn't update the actual position. Any help?

[wmonecke]

This is 100% not the way to do it but it works at the moment. Simply wrap your <Rnd/> in a div with the offsets of your initial height and width like this:

 <div style={{ position: "absolute", bottom: `${initialPosition.height}px`, right: `${initialPosition.width}px` }}>
      <Rnd>
          ...
      </Rnd>
</div>

I am using redux so to me it looks something like this:

const EXTRA_BOTTOM_OFFSET = 8
<div
      style={{
        position: "absolute",
        bottom: `${INITIAL_UI_STATE.notes.notesWindowDimensions.height + EXTRA_BOTTOM_OFFSET}px`,
        right: `${INITIAL_UI_STATE.notes.notesWindowDimensions.width}px`,
      }}
    >
      <Rnd>
          ...

[mpelzsherman]

@wmonecke 's solution didn't work for me. My <Rnd> - wrapped component was no longer visible.

What did work is setting the default.x prop to:

document.getElementById('MyWindow')?.getBoundingClientRect().width; 

e.g.

        <Rnd
            default={{
                x: document.getElementById('MyWindow')?.getBoundingClientRect().width - 350 ,