Skip to content

Commit 468ce12

Browse files
joshuaellisjoshuaellis
authored
[feat]: add useSpringValue (pmndrs#2035)
1 parent b4685f0 commit 468ce12

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+1824
-42
lines changed

‎.changeset/nine-doors-sneeze.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
'@react-spring/core': minor
3+
'@react-spring/shared': minor
4+
'@react-spring/animated': minor
5+
'@react-spring/parallax': minor
6+
'@react-spring/rafz': minor
7+
'react-spring': minor
8+
'@react-spring/types': minor
9+
'@react-spring/konva': minor
10+
'@react-spring/native': minor
11+
'@react-spring/three': minor
12+
'@react-spring/web': minor
13+
'@react-spring/zdog': minor
14+
---
15+
16+
feat: add useSpringValue

‎.codesandbox/ci.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"/demo/src/sandboxes/goo-blobs",
1616
"/demo/src/sandboxes/image-fade",
1717
"/demo/src/sandboxes/list-reordering",
18+
"/demo/src/sandboxes/macos-dock",
1819
"/demo/src/sandboxes/masonry",
1920
"/demo/src/sandboxes/multistage-transition",
2021
"/demo/src/sandboxes/noise",

‎demo/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"react-feather": "^2.0.10",
2727
"react-use-gesture": "^9.1.3",
2828
"react-use-measure": "^2.1.1",
29+
"sass": "^1.56.1",
2930
"styled-components": "^5.3.6",
3031
"three": "^0.146.0",
3132
"three-stdlib": "^2.17.3",

‎demo/src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import FloatingButton from './sandboxes/floating-button/src/App'
2424
import GooBlobs from './sandboxes/goo-blobs/src/App'
2525

2626
import ImageFade from './sandboxes/image-fade/src/App'
27+
import MacOSDock from './sandboxes/macos-dock/src/App'
2728

2829
import ListReordering from './sandboxes/list-reordering/src/App'
2930

@@ -69,6 +70,7 @@ const links = {
6970
'goo-blobs': GooBlobs,
7071
'image-fade': ImageFade,
7172
'list-reordering': ListReordering,
73+
'macos-dock': MacOSDock,
7274
masonry: Masonry,
7375
'multistage-transition': MultiStageTransition,
7476
noise: Noise,

‎demo/src/sandboxes/macos-dock/.prettierrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"arrowParens": "avoid",
3+
"jsxBracketSameLine": true,
4+
"printWidth": 120,
5+
"semi": false,
6+
"singleQuote": true,
7+
"tabWidth": 2,
8+
"trailingComma": "es5"
9+
}

‎demo/src/sandboxes/macos-dock/custom.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
declare module '*.scss'

‎demo/src/sandboxes/macos-dock/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "MacOS Dock",
3+
"version": "1.0.0",
4+
"main": "src/index.tsx",
5+
"description": "A MacOS-esque dock created in HTML with all the animations you'd expect!",
6+
"keywords": [
7+
"useSpringValue",
8+
"useSpring",
9+
"interpolation",
10+
"useDrag",
11+
"loop"
12+
],
13+
"dependencies": {
14+
"@react-spring/web": "*",
15+
"@use-gesture/react": "^10.2.22",
16+
"react": "^18.0.0",
17+
"react-dom": "^18.0.0",
18+
"react-scripts": "5.0.1"
19+
},
20+
"scripts": {
21+
"start": "react-scripts start",
22+
"build": "react-scripts build",
23+
"test": "react-scripts test --env=jsdom",
24+
"eject": "react-scripts eject"
25+
},
26+
"browserslist": [
27+
">0.2%",
28+
"not dead",
29+
"not ie <= 11",
30+
"not op_mini all"
31+
],
32+
"devDependencies": {
33+
"@types/react": "^18.0.8",
34+
"@types/react-dom": "^18.0.3",
35+
"sass": "1.5.6",
36+
"typescript": "^4.8.3"
37+
}
38+
}

‎demo/src/sandboxes/macos-dock/public/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="theme-color" content="#000000" />
7+
<!--
8+
manifest.json provides metadata used when your web app is added to the
9+
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10+
-->
11+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
12+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
13+
<!--
14+
Notice the use of %PUBLIC_URL% in the tags above.
15+
It will be replaced with the URL of the `public` folder during the build.
16+
Only files inside the `public` folder can be referenced from the HTML.
17+
18+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19+
work correctly both with client-side routing and a non-root public URL.
20+
Learn how to configure a non-root public URL by running `npm run build`.
21+
-->
22+
<title>React Spring Sandbox</title>
23+
</head>
24+
25+
<body>
26+
<noscript> You need to enable JavaScript to run this app. </noscript>
27+
<div id="root"></div>
28+
<!--
29+
This HTML file is a template.
30+
If you open it directly in the browser, you will see an empty page.
31+
32+
You can add webfonts, meta tags, or analytics to this file.
33+
The build step will place the bundled scripts into the <body> tag.
34+
35+
To begin the development, run `npm start` or `yarn start`.
36+
To create a production bundle, use `npm run build` or `yarn build`.
37+
-->
38+
</body>
39+
</html>

‎demo/src/sandboxes/macos-dock/src/App.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import * as React from 'react'
2+
3+
import { Card } from './components/Card'
4+
import { Dock } from './components/Dock'
5+
import { DockCard } from './components/DockCard'
6+
import { DockDivider } from './components/DockDivider'
7+
8+
import styles from './styles.module.scss'
9+
10+
const GRADIENTS = [
11+
'https://products.ls.graphics/mesh-gradients/images/03.-Snowy-Mint_1-p-130x130q80.jpeg',
12+
'https://products.ls.graphics/mesh-gradients/images/04.-Hopbush_1-p-130x130q80.jpeg',
13+
'https://products.ls.graphics/mesh-gradients/images/06.-Wisteria-p-130x130q80.jpeg',
14+
'https://products.ls.graphics/mesh-gradients/images/09.-Light-Sky-Blue-p-130x130q80.jpeg',
15+
'https://products.ls.graphics/mesh-gradients/images/12.-Tumbleweed-p-130x130q80.jpeg',
16+
'https://products.ls.graphics/mesh-gradients/images/15.-Perfume_1-p-130x130q80.jpeg',
17+
null,
18+
'https://products.ls.graphics/mesh-gradients/images/36.-Pale-Chestnut-p-130x130q80.jpeg',
19+
]
20+
21+
export default function App() {
22+
return (
23+
<div className={styles.body}>
24+
<Dock>
25+
{GRADIENTS.map((src, index) =>
26+
src ? (
27+
<DockCard key={src}>
28+
<Card src={src} />
29+
</DockCard>
30+
) : (
31+
<DockDivider key={index} />
32+
)
33+
)}
34+
</Dock>
35+
</div>
36+
)
37+
}

‎demo/src/sandboxes/macos-dock/src/components/Card/index.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import * as React from 'react'
2+
3+
import styles from './styles.module.scss'
4+
5+
interface CardProps {
6+
src: string
7+
}
8+
9+
export const Card = ({ src }: CardProps) => (
10+
<span className={styles.card}>
11+
<img className={styles.card__blur} src={src} alt="" />
12+
<img className={styles.card__img} src={src} alt="" />
13+
</span>
14+
)

0 commit comments

Comments
 (0)