Skip to content

Commit 563bf9a

Browse files
LaurentClaesclaude
andcommitted
Update README with React 18 migration guide and breaking changes
Document the React 16 → 18 upgrade: createRoot migration, WrapperRef span wrapper, framer-motion v12, and react-map-gl v8 changes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 429044e commit 563bf9a

1 file changed

Lines changed: 24 additions & 3 deletions

File tree

packages/react-drylus/README.md

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,30 @@ The "root" package for all of the Drawbotics styles (excluding [icons]('../icons
55
The components are written in React and are styled using [emotion](https://github.com/emotion-js/emotion).
66

77
## React Version Support
8-
- Developed and tested against **React 16**
9-
- **React 18/19** support is best-effort and community-tested
10-
- If you encounter issues on newer React versions, please report them
8+
- Developed and tested against **React 18**
9+
- Peer dependency: `react >= 16.8.0 < 20`
10+
- React 16/17 may still work but are no longer tested
11+
12+
### Migrating from React 16/17 to React 18
13+
14+
If you are upgrading your application to React 18 alongside this package, note the following breaking changes:
15+
16+
- **`ReactDOM.render()` is deprecated.** Use `createRoot` instead:
17+
```jsx
18+
// Before
19+
import ReactDOM from 'react-dom';
20+
ReactDOM.render(<App />, document.getElementById('root'));
21+
22+
// After
23+
import { createRoot } from 'react-dom/client';
24+
createRoot(document.getElementById('root')).render(<App />);
25+
```
26+
27+
- **`WrapperRef` now renders a `<span style="display: contents">` wrapper.** Components that use `Tooltip`, `Popover`, or other overlay components internally use `WrapperRef` which previously used `ReactDOM.findDOMNode` (removed in React 18 StrictMode). It now wraps children in a transparent `<span>`. This should not affect layout but may affect CSS selectors that rely on direct parent-child relationships.
28+
29+
- **`framer-motion` upgraded from v6 to v12.** If you import `AnimationGroup` or `AnimatedItem`, the `exitBeforeEnter` prop on `AnimatePresence` has been replaced by `mode="wait"`. This is handled internally — no consumer changes needed unless you use framer-motion directly.
30+
31+
- **`react-map-gl` upgraded from v7 to v8.** The `Map` component now imports from `react-map-gl/mapbox` internally. No consumer API changes.
1132

1233
## Development
1334
```

0 commit comments

Comments
 (0)