v3.0.0: Modern hooks-based rewrite with TypeScript and accessibility

.github/workflows/build-test.yml

@@ -7,26 +7,36 @@ on:
   pull_request:
     branches:
       - master
+      - v3
 
 jobs:
   build-test:
+    name: Build and Test
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: 14.x
+          node-version: 22.x
 
       - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+        run: npm ci
 
-      - name: Build
-        run: yarn build
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Format check
+        run: npm run format:check
 
-      - name: Test
-        run: yarn test
-        # run: yarn test:coverage
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build

.github/workflows/deploy-examples.yml

@@ -0,0 +1,34 @@
+name: Deploy Examples to GitHub Pages
+
+on:
+  push:
+    branches: [master]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build examples
+        run: npm run examples:build
+
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist-examples

.gitignore

@@ -1,39 +1,9 @@
-# Logs
-logs
-*.log
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directory
-# Commenting this out is preferred by some people, see
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
 node_modules
-
-# Users Environment Variables
-.lock-wscript
-
-.idea
-*.iml
-/lib
-
-lcov.info
-.DS_Store
-
 dist
-build
-.cache
+dist-examples
+coverage
+.DS_Store
+*.log
+.vscode
+.idea
+*.tsbuildinfo

.prettierignore

@@ -1 +1,3 @@
-CHANGELOG.md
+dist
+node_modules
+package-lock.json

.prettierrc

@@ -1,4 +1,8 @@
 {
+  "semi": true,
   "singleQuote": true,
-  "trailingComma": "es5"
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "arrowParens": "always"
 }

CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.0.0](https://github.com/tomkp/react-split-pane/compare/v0.1.92...v3.0.0) (2025-12-22)
+
+### ⚠ BREAKING CHANGES
+
+* Complete rewrite with modern React patterns
+* Children must now be wrapped in `<Pane>` components
+* `split` prop renamed to `direction` (and meanings swapped to align with CSS flex)
+* Size constraints (`minSize`, `maxSize`, `defaultSize`) moved to `<Pane>` component
+* Callback props renamed: `onDragStarted` → `onResizeStart`, `onChange` → `onResize`, `onDragFinished` → `onResizeEnd`
+* Callback signatures changed to include event metadata
+* `primary` prop removed (use controlled mode instead)
+* `allowResize` renamed to `resizable`
+* CSS class names changed: `SplitPane` → `split-pane`, `Resizer` → `split-pane-divider`
+* IE11 no longer supported
+
+### Features
+
+* **Hooks-based architecture**: Complete rewrite using modern React hooks
+* **TypeScript**: Full TypeScript support with strict mode
+* **Accessibility**: Full keyboard navigation (arrow keys, Home, End) and ARIA attributes
+* **Touch support**: Built-in touch event handling for mobile devices
+* **Snap points**: Optional snap-to positions during resize
+* **Multiple panes**: Native support for 2+ panes without nesting
+* **Persistence hook**: `usePersistence` hook for localStorage/sessionStorage
+* **Custom dividers**: Pass custom divider components via `divider` prop
+* **RAF-throttled**: Smooth resize performance with requestAnimationFrame throttling
+* **Smaller bundle**: < 5KB gzipped
+
+### Migration
+
+See [MIGRATION.md](./MIGRATION.md) for detailed upgrade instructions from v0.1.x.
+
 ### [0.1.92](https://github.com/tomkp/react-split-pane/compare/v0.1.91...v0.1.92) (2020-08-10)