diff --git a/CHANGELOG.md b/CHANGELOG.md index ce419066..1ae29b4c 100644 --- a/CHANGELOG.md +++ b/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 or v2.x. ### [0.1.92](https://github.com/tomkp/react-split-pane/compare/v0.1.91...v0.1.92) (2020-08-10) diff --git a/MIGRATION.md b/MIGRATION.md index 59f8c525..d2f1ce8f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,10 +1,12 @@ -# Migration Guide: v0.1.x to v3.0.0 +# Migration Guide 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 to react-split-pane v3.0.0. Version 3 is a complete rewrite with modern React patterns, TypeScript support, and improved accessibility. -## Overview of Changes +## Migrating from v0.1.x -v3.0.0 introduces several breaking changes: +### Overview of Changes + +v3.0.0 introduces several breaking changes from v0.1.x: - **Component structure**: Children must be wrapped in `` components - **Props renamed**: `split` → `direction`, callback names changed @@ -13,9 +15,9 @@ v3.0.0 introduces several breaking changes: - **New features**: Keyboard navigation, ARIA attributes, touch support, snap points - **Removed**: `primary` prop, `allowResize` per-pane, `Resizer` class names -## Quick Migration +### Quick Migration -### Before (v0.1.x) +#### Before (v0.1.x) ```jsx import SplitPane from 'react-split-pane'; @@ -26,7 +28,7 @@ import SplitPane from 'react-split-pane'; ``` -### After (v3) +#### After (v3) ```jsx import { SplitPane, Pane } from 'react-split-pane'; @@ -41,9 +43,9 @@ import { SplitPane, Pane } from 'react-split-pane'; ``` -## Detailed Changes +### Detailed Changes -### 1. Import Changes +#### 1. Import Changes ```jsx // v0.1.x @@ -53,7 +55,7 @@ import SplitPane from 'react-split-pane'; import { SplitPane, Pane } from 'react-split-pane'; ``` -### 2. Children Must Be Wrapped in `` +#### 2. Children Must Be Wrapped in `` In v0.1.x, you could use any element as children. In v3, all children must be `` components: @@ -75,7 +77,7 @@ In v0.1.x, you could use any element as children. In v3, all children must be `< ``` -### 3. Direction Terminology Changed +#### 3. Direction Terminology Changed The meaning of `vertical` and `horizontal` has been **swapped** to align with CSS flexbox terminology: @@ -104,7 +106,7 @@ In v3, `direction` describes the flex direction: ``` -### 4. Size Props Moved to `` +#### 4. Size Props Moved to `` Size constraints have moved from `` to individual `` components: @@ -126,7 +128,7 @@ Size constraints have moved from `` to individual `` components ``` -### 5. Size Values Accept Strings +#### 5. Size Values Accept Strings v3 accepts both numbers (pixels) and strings with units: @@ -140,7 +142,7 @@ v3 accepts both numbers (pixels) and strings with units: // percentages ``` -### 6. Callback Props Renamed +#### 6. Callback Props Renamed | v0.1.x | v3 | Notes | |--------|-----|-------| @@ -169,7 +171,7 @@ The `ResizeEvent` object includes: - `source`: `'mouse'` | `'touch'` | `'keyboard'` - `originalEvent`: The original DOM event -### 7. `primary` Prop Removed +#### 7. `primary` Prop Removed 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 ``: @@ -190,7 +192,7 @@ function App() { } ``` -### 8. `allowResize` Renamed to `resizable` +#### 8. `allowResize` Renamed to `resizable` ```jsx // v0.1.x @@ -200,7 +202,7 @@ function App() { ``` -### 9. `step` Prop +#### 9. `step` Prop The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag snapping: @@ -216,9 +218,9 @@ The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag sn > ``` -### 10. Styling Changes +#### 10. Styling Changes -#### CSS Class Names Changed +##### CSS Class Names Changed | v0.1.x | v3 | |--------|-----| @@ -226,7 +228,7 @@ The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag sn | `Resizer` | `split-pane-divider` | | `Pane1`, `Pane2` | `split-pane-pane` | -#### Inline Style Props Changed +##### Inline Style Props Changed | v0.1.x | v3 | |--------|-----| @@ -262,7 +264,7 @@ The `step` prop now applies to keyboard navigation. Use `snapPoints` for drag sn ``` -#### Custom Resizer → Custom Divider +##### Custom Resizer → Custom Divider ```jsx // v0.1.x - CSS class customization @@ -283,7 +285,7 @@ function CustomDivider(props) { ``` -### 11. Persistence Pattern Updated +#### 11. Persistence Pattern Updated ```jsx // v0.1.x @@ -311,7 +313,7 @@ function App() { } ``` -### 12. Multiple Panes +#### 12. Multiple Panes v3 supports 2+ panes natively (no nesting required): @@ -333,6 +335,88 @@ v3 supports 2+ panes natively (no nesting required): ``` +--- + +## Migrating from v2.x + +v2.x had a different API than v0.1.x. It already used `` components but with different prop names. + +### Quick Migration + +#### Before (v2.x) + +```jsx +import SplitPane from 'react-split-pane'; +import Pane from 'react-split-pane/lib/Pane'; + + + +
Left
+
+ +
Right
+
+
+``` + +#### After (v3) + +```jsx +import { SplitPane, Pane } from 'react-split-pane'; + + + +
Left
+
+ +
Right
+
+
+``` + +### Key Differences from v2.x + +| v2.x | v3 | Notes | +|------|-----|-------| +| `split="vertical"` | `direction="horizontal"` | Terminology swapped | +| `split="horizontal"` | `direction="vertical"` | Terminology swapped | +| `initialSize` | `defaultSize` | Prop renamed | +| `onChange` | `onResize` | Callback renamed, signature changed | +| `onResizeStart` | `onResizeStart` | Same name, different signature | +| `onResizeEnd` | `onResizeEnd` | Same name, different signature | +| `resizerSize` | N/A | Use CSS to style divider width | + +### Import Changes + +```jsx +// v2.x +import SplitPane from 'react-split-pane'; +import Pane from 'react-split-pane/lib/Pane'; + +// v3 +import { SplitPane, Pane } from 'react-split-pane'; +``` + +### Callback Signature Changes + +```jsx +// v2.x + console.log(sizes)} + onResizeStart={() => console.log('started')} + onResizeEnd={(sizes) => console.log('ended', sizes)} +> + +// v3 + console.log(sizes, event.source)} + onResizeStart={(event) => console.log('started', event.source)} + onResizeEnd={(sizes, event) => console.log('ended', sizes)} +> +``` + +--- + ## New Features in v3 ### Keyboard Navigation diff --git a/README.md b/README.md index bccac9a5..5c4cf1b9 100644 --- a/README.md +++ b/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 or v2.x See [MIGRATION.md](./MIGRATION.md) for detailed migration guide.