docs: add v2.x to migration guide

Update the migration guide to explicitly cover v2.x users in addition
to v0.1.x users, since both versions share the same API.

Closes #863

Author: tomkp

CHANGELOG.md

@@ -32,7 +32,7 @@ All notable changes to this project will be documented in this file. See [standa
 
 ### Migration
 
-See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions from v0.1.x.
+See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions from v0.1.x / v2.x.
 
 ### [0.1.92](https://github.com/tomkp/react-split-pane/compare/v0.1.91...v0.1.92) (2020-08-10)
 

MIGRATION.md

@@ -1,6 +1,8 @@
-# Migration Guide: v0.1.x to v3.0.0
+# Migration Guide: v0.1.x / v2.x to v3.0.0
 
-This guide will help you migrate from react-split-pane v0.1.x to v3.0.0. Version 3 is a complete rewrite with modern React patterns, TypeScript support, and improved accessibility.
+This guide will help you migrate from react-split-pane v0.1.x or v2.x to v3.0.0. Version 3 is a complete rewrite with modern React patterns, TypeScript support, and improved accessibility.
+
+> **Note:** v2.x shared the same API as v0.1.x, so this guide applies to both versions.
 
 ## Overview of Changes
 
@@ -15,7 +17,7 @@ v3.0.0 introduces several breaking changes:
 
 ## Quick Migration
 
-### Before (v0.1.x)
+### Before (v0.1.x / v2.x)
 
 ```jsx
 import SplitPane from 'react-split-pane';
@@ -46,7 +48,7 @@ import { SplitPane, Pane } from 'react-split-pane';
 ### 1. Import Changes
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 import SplitPane from 'react-split-pane';
 
 // v3
@@ -55,10 +57,10 @@ import { SplitPane, Pane } from 'react-split-pane';
 
 ### 2. Children Must Be Wrapped in `<Pane>`
 
-In v0.1.x, you could use any element as children. In v3, all children must be `<Pane>` components:
+In v0.1.x / v2.x, you could use any element as children. In v3, all children must be `<Pane>` components:
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane split="vertical">
   <div>Pane 1</div>
   <div>Pane 2</div>
@@ -79,8 +81,8 @@ In v0.1.x, you could use any element as children. In v3, all children must be `<
 
 The meaning of `vertical` and `horizontal` has been **swapped** to align with CSS flexbox terminology:
 
-| v0.1.x | v3 | Layout |
-|--------|-----|--------|
+| v0.1.x / v2.x | v3 | Layout |
+|---------------|-----|--------|
 | `split="vertical"` | `direction="horizontal"` | Panes side-by-side (left/right) |
 | `split="horizontal"` | `direction="vertical"` | Panes stacked (top/bottom) |
 
@@ -89,15 +91,15 @@ In v3, `direction` describes the flex direction:
 - `vertical` = panes arranged vertically (stacked)
 
 ```jsx
-// v0.1.x - side-by-side panes
+// v0.1.x / v2.x - side-by-side panes
 <SplitPane split="vertical">
 
 // v3 - side-by-side panes
 <SplitPane direction="horizontal">
 ```
 
 ```jsx
-// v0.1.x - stacked panes
+// v0.1.x / v2.x - stacked panes
 <SplitPane split="horizontal">
 
 // v3 - stacked panes
@@ -109,7 +111,7 @@ In v3, `direction` describes the flex direction:
 Size constraints have moved from `<SplitPane>` to individual `<Pane>` components:
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane split="vertical" minSize={50} maxSize={500} defaultSize={200}>
   <div>Pane 1</div>
   <div>Pane 2</div>
@@ -131,7 +133,7 @@ Size constraints have moved from `<SplitPane>` to individual `<Pane>` components
 v3 accepts both numbers (pixels) and strings with units:
 
 ```jsx
-// v0.1.x - numbers only (pixels)
+// v0.1.x / v2.x - numbers only (pixels)
 <SplitPane minSize={50} defaultSize={200}>
 
 // v3 - numbers or strings with units
@@ -142,14 +144,14 @@ v3 accepts both numbers (pixels) and strings with units:
 
 ### 6. Callback Props Renamed
 
-| v0.1.x | v3 | Notes |
-|--------|-----|-------|
+| v0.1.x / v2.x | v3 | Notes |
+|---------------|-----|-------|
 | `onDragStarted` | `onResizeStart` | Now receives `ResizeEvent` object |
 | `onChange` | `onResize` | Receives `(sizes[], event)` |
 | `onDragFinished` | `onResizeEnd` | Receives `(sizes[], event)` |
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane
   onDragStarted={() => console.log('started')}
   onChange={(size) => console.log(size)}
@@ -174,7 +176,7 @@ The `ResizeEvent` object includes:
 The `primary` prop has been removed. In v3, sizes are distributed proportionally when the container resizes. For controlled sizing, use the `size` prop on each `<Pane>`:
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane split="vertical" defaultSize={200} primary="second">
 
 // v3 - use controlled mode with state
@@ -193,7 +195,7 @@ function App() {
 ### 8. `allowResize` Renamed to `resizable`
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane allowResize={false}>
 
 // v3
@@ -205,7 +207,7 @@ function App() {
 The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag snapping:
 
 ```jsx
-// v0.1.x - step for dragging
+// v0.1.x / v2.x - step for dragging
 <SplitPane step={50}>
 
 // v3 - step for keyboard, snapPoints for dragging
@@ -220,24 +222,24 @@ The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag sn
 
 #### CSS Class Names Changed
 
-| v0.1.x | v3 |
-|--------|-----|
+| v0.1.x / v2.x | v3 |
+|---------------|-----|
 | `SplitPane` | `split-pane` |
 | `Resizer` | `split-pane-divider` |
 | `Pane1`, `Pane2` | `split-pane-pane` |
 
 #### Inline Style Props Changed
 
-| v0.1.x | v3 |
-|--------|-----|
+| v0.1.x / v2.x | v3 |
+|---------------|-----|
 | `style` | `style` |
 | `paneStyle` | Use `<Pane style={}>` |
 | `pane1Style` | Use `<Pane style={}>` on first pane |
 | `pane2Style` | Use `<Pane style={}>` on second pane |
 | `resizerStyle` | `dividerStyle` |
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane
   style={{ height: '100vh' }}
   pane1Style={{ background: 'red' }}
@@ -265,7 +267,7 @@ The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag sn
 #### Custom Resizer → Custom Divider
 
 ```jsx
-// v0.1.x - CSS class customization
+// v0.1.x / v2.x - CSS class customization
 <SplitPane resizerClassName="my-resizer">
 
 // v3 - custom component or className
@@ -286,7 +288,7 @@ function CustomDivider(props) {
 ### 11. Persistence Pattern Updated
 
 ```jsx
-// v0.1.x
+// v0.1.x / v2.x
 <SplitPane
   defaultSize={parseInt(localStorage.getItem('splitPos'), 10) || 200}
   onChange={(size) => localStorage.setItem('splitPos', size)}
@@ -316,7 +318,7 @@ function App() {
 v3 supports 2+ panes natively (no nesting required):
 
 ```jsx
-// v0.1.x - required nesting for 3+ panes
+// v0.1.x / v2.x - required nesting for 3+ panes
 <SplitPane split="vertical">
   <div>Pane 1</div>
   <SplitPane split="vertical">

README.md

@@ -345,7 +345,7 @@ A subtle single-pixel divider:
 
 React Split Pane works seamlessly with Tailwind CSS and shadcn/ui. See [TAILWIND.md](./TAILWIND.md) for detailed integration examples including custom dividers and CSS variable overrides.
 
-## Migration from v0.1.x
+## Migration from v0.1.x / v2.x
 
 See [MIGRATION.md](./MIGRATION.md) for detailed migration guide.