Skip to content

Commit 79d444e

Browse files
joshuaellisjoshuaellis
committed
chore(examples): add floating-button
1 parent 860b1c4 commit 79d444e

File tree

18 files changed

+992
-12
lines changed

18 files changed

+992
-12
lines changed

‎demo/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,11 @@
1111
"serve": "vite preview"
1212
},
1313
"dependencies": {
14+
"@radix-ui/react-dropdown-menu": "^2.0.1",
1415
"@react-three/drei": "^9.40.0",
1516
"@react-three/fiber": "^8.9.1",
17+
"@stitches/react": "^1.2.8",
18+
"@use-gesture/react": "^10.2.22",
1619
"lodash-move": "1.1.1",
1720
"lodash.clamp": "^4.0.3",
1821
"lodash.shuffle": "^4.2.0",
@@ -30,8 +33,6 @@
3033
},
3134
"devDependencies": {
3235
"@types/lodash.clamp": "^4.0.7",
33-
"@types/lodash.shuffle": "^4.2.6",
34-
"@vitejs/plugin-react-refresh": "^1.3.6",
35-
"vite": "^3.2.3"
36+
"@types/lodash.shuffle": "^4.2.6"
3637
}
3738
}

‎demo/public/bright-rain.png‎

4.73 MB
Loading

‎demo/src/App.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import * as React from 'react'
22
import { Link, Route } from 'wouter'
3+
import { Globals } from '@react-spring/web'
4+
35
import styles from './styles.module.css'
46

57
import AnimatingAuto from './sandboxes/animating-auto/src/App'
@@ -16,6 +18,7 @@ import DraggableList from './sandboxes/draggable-list/src/App'
1618
import ExitBeforeEnter from './sandboxes/exit-before-enter/src/App'
1719

1820
import FlipCard from './sandboxes/flip-card/src/App'
21+
import FloatingButton from './sandboxes/floating-button/src/App'
1922

2023
import GooBlobs from './sandboxes/goo-blobs/src/App'
2124

@@ -44,6 +47,10 @@ import Viewpager from './sandboxes/viewpager/src/App'
4447

4548
import WebGlSwitch from './sandboxes/webgl-switch/src/App'
4649

50+
Globals.assign({
51+
frameLoop: 'always',
52+
})
53+
4754
const links = {
4855
'animating-auto': AnimatingAuto,
4956
card: Card,
@@ -55,6 +62,7 @@ const links = {
5562
'draggable-list': DraggableList,
5663
'exit-before-enter': ExitBeforeEnter,
5764
'flip-card': FlipCard,
65+
'floating-button': FloatingButton,
5866
'goo-blobs': GooBlobs,
5967
'image-fade': ImageFade,
6068
'list-reordering': ListReordering,

‎demo/src/sandboxes/flip-card/src/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react'
2-
import ReactDOM from 'react-dom/client'
2+
import { createRoot } from 'react-dom/client'
33
import App from './App'
44
import './index.css'
55

66
const rootElement = document.getElementById('root')!
7-
ReactDOM.createRoot(rootElement).render(
7+
createRoot(rootElement).render(
88
<React.StrictMode>
99
<App />
1010
</React.StrictMode>

‎demo/src/sandboxes/floating-button/.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/floating-button/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "Floating Button",
3+
"version": "1.0.0",
4+
"description": "A small floating button like Facebook's desktop messenger built with radix & stitches",
5+
"keywords": [
6+
"use-gesture",
7+
"useSpring",
8+
"useSprings",
9+
"interpolation",
10+
"stitches",
11+
"radix-ui"
12+
],
13+
"main": "src/index.tsx",
14+
"dependencies": {
15+
"@radix-ui/react-dropdown-menu": "^2.0.1",
16+
"@react-spring/web": "*",
17+
"@stitches/react": "^1.2.8",
18+
"@use-gesture/react": "^10.2.22",
19+
"react": "^18.0.0",
20+
"react-dom": "^18.0.0",
21+
"react-scripts": "5.0.1"
22+
},
23+
"devDependencies": {
24+
"@types/react": "^18.0.8",
25+
"@types/react-dom": "^18.0.3",
26+
"typescript": "^4.8.3"
27+
},
28+
"scripts": {
29+
"start": "react-scripts start",
30+
"build": "react-scripts build",
31+
"test": "react-scripts test --env=jsdom",
32+
"eject": "react-scripts eject"
33+
},
34+
"browserslist": [
35+
">0.2%",
36+
"not dead",
37+
"not ie <= 11",
38+
"not op_mini all"
39+
]
40+
}

‎demo/src/sandboxes/floating-button/public/bright-rain.png‎

4.73 MB
Loading

‎demo/src/sandboxes/floating-button/public/index.html‎

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

0 commit comments

Comments
 (0)