@ashxjs/split-view/lib/LeftPanel/LeftPanel.js

Simple react split-view component with resizing divider

import { jsx as _jsx } from "react/jsx-runtime";
import { createRef, useEffect } from "react";
import { styles } from "../styles";
export const LeftPanel = ({ children, leftWidth, setLeftWidth, }) => {
    const leftRef = createRef();
    useEffect(() => {
        if (leftRef.current) {
            if (!leftWidth) {
                setLeftWidth(leftRef.current.clientWidth);
            }
            leftRef.current.style.width = `${leftWidth}px`;
        }
    }, [leftRef]);
    return (_jsx("div", { className: "left-component-wrapper", ref: leftRef, style: styles.LeftPanel, children: children }));
};