Programmatically resize panel

[dt-ap]

Is there any documentation to resize panel programatically without dragging event? For example, click a button to expand/shrink panel.

[sleitor]

Dirty hack for apply changes programmaticaly:

Component using the "react-split"

import React, { useState } from 'react';
import Split from 'react-split';

const GUTTER_SIZE = 5;

const SplitPanel = () => {
  const [sizes, setSizes] = useState([50,50]);
  const [gutterSize, setGutterSize] = useState(GUTTER_SIZE);

  const resetSizes = () => {
    setSizes([50, 50]);

    // Dirty hack for apply change sizes
    setGutterSize(gutterSize === GUTTER_SIZE ? GUTTER_SIZE + 0.000000001 : GUTTER_SIZE);
  };

  return (
    <Split
      gutterSize={gutterSize}
      minSize={33}
      sizes={sizes}
      direction='vertical'
    >
      <div>
        Some content 1 <button onClick={resetSizes}>Reset Size</button>
      </div>
      <div>
        Some content 2 <button onClick={resetSizes}>Reset Size</button>
      </div>
    </Split>
  );
};

export default SplitPanel;

[a-siewe]

You can use React-ref, render the gutter yourself and apply an event listener to it. Below you can see how I did it in my app.

import React, {PropsWithChildren, ReactElement} from 'react'
import Split from 'react-split'

import './SplitPane.scss'
import {Pane, PaneProps} from './Pane'

interface Props extends PropsWithChildren<any>
{
	size?: number[]
	direction?: 'horizontal' | 'vertical'
	className?: string
}

export class SplitPane extends React.Component<Props>
{
	public static Pane = Pane
	splitRef = React.createRef()


	handleOnClick = (index: number): void =>
	{
		this.splitRef.current.split.collapse(index)
	}

	renderGutter = (index: number, direction: string): HTMLElement =>
	{
		const gutter = document.createElement('div')
		gutter.className = `gutter gutter-${direction}`
		const gutterBarDrag = document.createElement('span')
		gutterBarDrag.className = `gutter-bar-drag gutter-bar-drag-${direction}`
		gutterBarDrag.addEventListener('click', () => this.handleOnClick(index))
		gutter.appendChild(gutterBarDrag)
		return gutter
	}

	public render(): JSX.Element
	{
		const {className, children} = this.props
		return (
			<Split  ref={this.splitRef}
				   sizes={paneSizes}
				   minSize={0}
				   gutterSize={10}
				   gutterAlign="center"
				   direction={this.props.direction}
				   dragInterval={1}
				   gutter={this.renderGutter}>
				{children}
			</Split>
		)
	}
}

[afk-mario]

This is how I did it

import React, { useState } from 'react';
import Split from 'react-split-grid';

 const MyComponent = () => {
  const [columns, setColumns] = useState(`1fr 16px ${initialSize}px`);

  const handleDrag = (direction, track, gridTemplateStyle) => {
    setColumns(gridTemplateStyle);
    window.dispatchEvent(new Event('resize'));
  };

  const setSize = (size) => {
    setColumns(`1fr 16px ${size}px`);
  };

  return (
          <Split
             gridTemplateColumns={columns}
             gridTemplateRows="1fr"
             cursor="ew-resize"
             onDrag={handleDrag}
      />
  )
}

[Michiel-2]

Use the setSizes([]) method from the instance
https://github.com/nathancahill/split/tree/master/packages/splitjs#setsizes
With react you can store the sizes in state, change state (setState() ) with a button

handleClick() => {
this.setState({sizes: [20, 80]})
}

render() {
return (

reset size

</Split>

) }