Skip to content

Commit 59f2917

Browse files
manudelimanudeli
authored
feat: support react 19 (#95)
1 parent a04c030 commit 59f2917

File tree

24 files changed

+489
-308
lines changed

24 files changed

+489
-308
lines changed

‎.changeset/config.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,10 @@
77
"access": "restricted",
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
10-
"ignore": []
10+
"ignore": [
11+
"@overlay-kit/framer-motion-react-16",
12+
"@overlay-kit/framer-motion-react-17",
13+
"@overlay-kit/framer-motion-react-18",
14+
"@overlay-kit/framer-motion-react-19"
15+
]
1116
}

‎.changeset/shiny-cars-compare.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"overlay-kit": minor
3+
---
4+
5+
feat: support react 19

‎.github/workflows/ci.yml

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ jobs:
2323
'yarn workspace @overlay-kit/framer-motion-react-16 run build',
2424
'yarn workspace @overlay-kit/framer-motion-react-17 run build',
2525
'yarn workspace @overlay-kit/framer-motion-react-18 run build',
26+
'yarn workspace @overlay-kit/framer-motion-react-19 run build',
2627
]
2728
steps:
2829
- uses: actions/checkout@v4

‎examples/react-16/framer-motion/CHANGELOG.md

-16
This file was deleted.

‎examples/react-16/framer-motion/index.html

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite + React + TS</title>
9-
</head>
10-
11-
<body>
12-
<div id="root"></div>
13-
<script type="module" src="/src/main.tsx"></script>
14-
</body>
15-
16-
</html>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎examples/react-16/framer-motion/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@overlay-kit/framer-motion-react-16",
33
"private": true,
4-
"version": "0.0.7",
4+
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
77
"predev": "yarn workspace overlay-kit build",

‎examples/react-17/framer-motion/CHANGELOG.md

-16
This file was deleted.

‎examples/react-17/framer-motion/index.html

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite + React + TS</title>
9-
</head>
10-
11-
<body>
12-
<div id="root"></div>
13-
<script type="module" src="/src/main.tsx"></script>
14-
</body>
15-
16-
</html>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎examples/react-17/framer-motion/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@overlay-kit/framer-motion-react-17",
33
"private": true,
4-
"version": "0.0.7",
4+
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
77
"predev": "yarn workspace overlay-kit build",

‎examples/react-18/framer-motion/CHANGELOG.md

-50
This file was deleted.

‎examples/react-18/framer-motion/index.html

+11-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
<!doctype html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
39

4-
<head>
5-
<meta charset="UTF-8" />
6-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Vite + React + TS</title>
9-
</head>
10-
11-
<body>
12-
<div id="root"></div>
13-
<script type="module" src="/src/main.tsx"></script>
14-
</body>
15-
16-
</html>
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎examples/react-18/framer-motion/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@overlay-kit/framer-motion-react-18",
33
"private": true,
4-
"version": "0.0.7",
4+
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
77
"predev": "yarn workspace overlay-kit build",

‎examples/react-19/framer-motion/.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎examples/react-19/framer-motion/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

‎examples/react-19/framer-motion/package.json

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "@overlay-kit/framer-motion-react-19",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"predev": "yarn workspace overlay-kit build",
8+
"dev": "yarn predev && vite",
9+
"build": "tsc && vite build",
10+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
11+
"preview": "vite preview"
12+
},
13+
"dependencies": {
14+
"framer-motion": "^11.14.1",
15+
"overlay-kit": "workspace:^",
16+
"react": "^19.0.0",
17+
"react-dom": "^19.0.0"
18+
},
19+
"devDependencies": {
20+
"@types/react": "^19.0.1",
21+
"@types/react-dom": "^19.0.2",
22+
"@vitejs/plugin-react": "^4.3.4",
23+
"typescript": "^5.4.5",
24+
"vite": "^5.2.13"
25+
}
26+
}

‎examples/react-19/framer-motion/src/components/modal.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { AnimatePresence, motion, type Variants } from 'framer-motion';
2+
import { useRef, type PropsWithChildren } from 'react';
3+
4+
type ModalProps = {
5+
isOpen?: boolean;
6+
onExit?: () => void;
7+
};
8+
9+
export function Modal({ children, isOpen = false, onExit }: PropsWithChildren<ModalProps>) {
10+
const prevIsOpenRef = useRef(isOpen);
11+
12+
if (isOpen !== prevIsOpenRef.current) {
13+
prevIsOpenRef.current = isOpen;
14+
15+
if (prevIsOpenRef.current === false) {
16+
setTimeout(() => onExit?.(), 300);
17+
}
18+
}
19+
20+
return (
21+
<AnimatePresence>{isOpen === true && <ModalContent isOpen={isOpen}>{children}</ModalContent>}</AnimatePresence>
22+
);
23+
}
24+
25+
const MODAL_CONTENT_VARIANTS: Variants = {
26+
hidden: { opacity: 0, scale: 0.75 },
27+
show: { opacity: 1, scale: 1 },
28+
};
29+
30+
function ModalContent({ children, isOpen }: PropsWithChildren<ModalProps>) {
31+
return (
32+
<div
33+
style={{
34+
zIndex: 100,
35+
position: 'fixed',
36+
top: 0,
37+
left: 0,
38+
bottom: 0,
39+
width: '100%',
40+
display: 'flex',
41+
alignItems: 'center',
42+
justifyContent: 'center',
43+
}}
44+
>
45+
<motion.section
46+
variants={MODAL_CONTENT_VARIANTS}
47+
initial="hidden"
48+
exit="hidden"
49+
animate={isOpen ? 'show' : 'hidden'}
50+
style={{
51+
padding: 120,
52+
borderWidth: 1,
53+
borderStyle: 'solid',
54+
borderColor: 'gray',
55+
borderRadius: 12,
56+
}}
57+
>
58+
{children}
59+
</motion.section>
60+
</div>
61+
);
62+
}

0 commit comments

Comments
 (0)