National Pest Management

    @white-matrix/react-split
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    react-split

    react split plugin for chainIDE

    install

    yarn add @white-matrix/react-split
    

    use col split

    1. style parent

    .App {
      text-align: center;
      position: fixed;
      top:0;
      right:0;
      bottom: 0;
      left: 0;
    }
    
    

    2. use ColSplit as an controlled component

    import { SplitProvider, ColSplit, useSplitContext, SplitItem } from "@white-matrix/react-split";
    
    
    export function App() {
      const splitArea = useSplitContext();
    
      const [widths, setWidths] = useState<(number | 'auto')[]>(['auto', 'auto', 'auto']);
    
      const _changeColWidths = useCallback((startPoint: (number | "auto")[], index: number, diff: number, lastDiff: number, totalWidth: number) => {
        const startPointNumber = [];
        const autoIndex = [];
        let leftTotal = totalWidth;
        for (let i = 0; i < startPoint.length; i++) {
          const w = startPoint[i];
          if (w !== 'auto') {
            startPointNumber[i] = w;
            leftTotal = leftTotal - w;
          } else {
            autoIndex.push(i);
          }
        }
    
        if (autoIndex.length) {
          const leftAvg = leftTotal / autoIndex.length
          for (let i = 0; i < autoIndex.length; i++) {
            startPointNumber[i] = leftAvg;
          }
        }
    
    
        if (startPointNumber[index - 1]) {
          startPointNumber[index - 1] = startPointNumber[index - 1] + diff;
        }
        startPointNumber[index] = startPointNumber[index] - diff;
        setWidths(startPointNumber)
      }, [])
    
       return (
          <div className="App">
             <SplitProvider value={splitArea}>
            <ColSplit widths={widths} onChange={_changeColWidths}>
               <SplitItem key="left">
                 <div className="left">left</div>
              </SplitItem>
              <SplitItem key="center">
                 <div className="center">center</div>
              </SplitItem>
              <SplitItem key="right">
                 <div className="right">right</div></SplitItem>
            </ColSplit>
          </SplitProvider>
          </div>
        );
    }
    

    Keywords

    Install

    npm i @white-matrix/react-split

    DownloadsWeekly Downloads

    85

    Version

    1.0.3

    License

    ISC

    Unpacked Size

    66 kB

    Total Files

    17

    Last publish

    Collaborators

    • feibowei
    • shige720
    • vera_wlz
    • hexi1997
    • sleepyyj
    • 12ain
    • chen-yu
    • wklili
    • cxm123
    • kilru
    • willin
    • liyw
    • lucklyric
    • q33357
    • xiadd