create new splitters from click

[survivant]

is it possible to create new splitters from a right click ->create new splitter (Horizontal or Vertical).

I'm looking for a way to create on the fly new splitters like a progressbar that I could split on the fly in multiple area with the resize functionnality.

[b-zurg]

I mean you could always render another split pane based on some state or data. I don't think there's anything that would prevent that.

[survivant]

thanks. I'll try to find a example do to that (I'm not that familiar with react).

[b-zurg]

I mean you could have your splitters be based on an array. Here's some pseudocode

const [splitters, setSplitters] = useState([1, 2]);
const addSplitter = () => setSplitters([...splitters, splitters.length]);

const onRightClick = (e: MouseEvent) => {
  // condition to check if right click
  if (e.nativeEvent.which === 3) addSplitter();
}

<SplitPane>
  {splitters.map((id, index) => <div key={index} onClick={onRightClick}/>}
</SplitPane>

I have not tested this and am writing purely as a sketch, but what's basically happening is that the split pane's children are rendered based on an array in a useState. The array's items' onClick handler is then adding an item to this array. Since it's in useState then it will trigger a rerender and a new pane will be added.

You can ask more questions but since this isn't an issue with the library I am closing it.