Quick Start

Installation

pnpm i @column-resizer/react

Ready to Go!

Here is a minimal example for two-column layout:

app.jsx

import React from 'react';
import { Container, Section, Bar } from '@column-resizer/react';
 
export default () => (
  <Container style={{ height: '100px', background: '#80808080' }}>
    <Section minSize={50} />
    <Bar size={10} style={{ background: 'currentColor', cursor: 'col-resize' }} />
    <Section minSize={100} />
  </Container>
);

Min Size 50px

Min Size 100px

React Container