Persist resize pane width on reload (Feature request)

[abhishekmg]

When the changes the width of a pane and then refreshes the changes width needs to persist

current behaviour

Screen.Recording.2024-04-16.at.1.27.00.PM.mov

[vimalsharma124]

I'm searching similar

[vimalsharma124]

Found it
https://www.npmjs.com/package/resizable-panes-react

[AruhaMaeda]

You can achieve it using local storage.

Here is the sample code.

import { Allotment } from "allotment"

const LOCAL_STORAGE_KEY = "splitSizes"
let initialSizes = [500, 500, 500]
if (typeof window !== "undefined") {
  const savedSizes = localStorage.getItem(LOCAL_STORAGE_KEY)
  if (savedSizes) {
    initialSizes = JSON.parse(savedSizes)
  }
}

function Test() {
  return (
    <>
      <Allotment
        defaultSizes={initialSizes}
        onDragEnd={(sizes) => {
          if (typeof window !== "undefined") {
            localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(sizes))
          }
        }}
      >
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
      </Allotment>
    </>
  )
}
export default Test