+
{transitions((style, item) => (
-
+
))}
diff --git a/demo/src/sandboxes/masonry/src/data.ts b/demo/src/sandboxes/masonry/src/data.ts
index 46612c49e9..1edefec6e0 100644
--- a/demo/src/sandboxes/masonry/src/data.ts
+++ b/demo/src/sandboxes/masonry/src/data.ts
@@ -1,16 +1,58 @@
export default [
- { css: 'https://images.pexels.com/photos/416430/pexels-photo-416430.jpeg', height: 150 },
- { css: 'https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg', height: 300 },
- { css: 'https://images.pexels.com/photos/911738/pexels-photo-911738.jpeg', height: 300 },
- { css: 'https://images.pexels.com/photos/358574/pexels-photo-358574.jpeg', height: 300 },
- { css: 'https://images.pexels.com/photos/1738986/pexels-photo-1738986.jpeg', height: 300 },
- { css: 'https://images.pexels.com/photos/96381/pexels-photo-96381.jpeg', height: 300 },
- { css: 'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg', height: 200 },
- { css: 'https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg', height: 300 },
- { css: 'https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg', height: 200 },
- { css: 'https://images.pexels.com/photos/327482/pexels-photo-327482.jpeg', height: 400 },
- { css: 'https://images.pexels.com/photos/2736834/pexels-photo-2736834.jpeg', height: 200 },
- { css: 'https://images.pexels.com/photos/249074/pexels-photo-249074.jpeg', height: 150 },
- { css: 'https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg', height: 400 },
- { css: 'https://images.pexels.com/photos/380337/pexels-photo-380337.jpeg', height: 200 },
+ {
+ css: 'https://images.pexels.com/photos/416430/pexels-photo-416430.jpeg',
+ height: 150,
+ },
+ {
+ css: 'https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg',
+ height: 300,
+ },
+ {
+ css: 'https://images.pexels.com/photos/911738/pexels-photo-911738.jpeg',
+ height: 300,
+ },
+ {
+ css: 'https://images.pexels.com/photos/358574/pexels-photo-358574.jpeg',
+ height: 300,
+ },
+ {
+ css: 'https://images.pexels.com/photos/1738986/pexels-photo-1738986.jpeg',
+ height: 300,
+ },
+ {
+ css: 'https://images.pexels.com/photos/96381/pexels-photo-96381.jpeg',
+ height: 300,
+ },
+ {
+ css: 'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg',
+ height: 200,
+ },
+ {
+ css: 'https://images.pexels.com/photos/227675/pexels-photo-227675.jpeg',
+ height: 300,
+ },
+ {
+ css: 'https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg',
+ height: 200,
+ },
+ {
+ css: 'https://images.pexels.com/photos/327482/pexels-photo-327482.jpeg',
+ height: 400,
+ },
+ {
+ css: 'https://images.pexels.com/photos/2736834/pexels-photo-2736834.jpeg',
+ height: 200,
+ },
+ {
+ css: 'https://images.pexels.com/photos/249074/pexels-photo-249074.jpeg',
+ height: 150,
+ },
+ {
+ css: 'https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg',
+ height: 400,
+ },
+ {
+ css: 'https://images.pexels.com/photos/380337/pexels-photo-380337.jpeg',
+ height: 200,
+ },
]
diff --git a/demo/src/sandboxes/masonry/src/useMedia.ts b/demo/src/sandboxes/masonry/src/useMedia.ts
index 2bcbb10422..e3de8165a6 100644
--- a/demo/src/sandboxes/masonry/src/useMedia.ts
+++ b/demo/src/sandboxes/masonry/src/useMedia.ts
@@ -1,6 +1,10 @@
import { useCallback, useEffect, useState } from 'react'
-export default function useMedia(queries: string[], values: number[], defaultValue: number) {
+export default function useMedia(
+ queries: string[],
+ values: number[],
+ defaultValue: number
+) {
const match = useCallback(
() => values[queries.findIndex(q => matchMedia(q).matches)] || defaultValue,
[defaultValue, queries, values]
diff --git a/demo/src/sandboxes/multistage-transition/.prettierrc b/demo/src/sandboxes/multistage-transition/.prettierrc
deleted file mode 100644
index dd400a7d96..0000000000
--- a/demo/src/sandboxes/multistage-transition/.prettierrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "arrowParens": "avoid",
-
- "printWidth": 120,
- "semi": false,
- "singleQuote": true,
- "tabWidth": 2,
- "trailingComma": "es5"
-}
diff --git a/demo/src/sandboxes/multistage-transition/src/App.tsx b/demo/src/sandboxes/multistage-transition/src/App.tsx
index 5597b42d82..832b44b9c5 100644
--- a/demo/src/sandboxes/multistage-transition/src/App.tsx
+++ b/demo/src/sandboxes/multistage-transition/src/App.tsx
@@ -19,7 +19,11 @@ export default function App() {
{ transform: 'perspective(600px) rotateX(180deg)', color: '#28d79f' },
{ transform: 'perspective(600px) rotateX(0deg)' },
],
- leave: [{ color: '#c23369' }, { innerHeight: 0 }, { opacity: 0, height: 0 }],
+ leave: [
+ { color: '#c23369' },
+ { innerHeight: 0 },
+ { opacity: 0, height: 0 },
+ ],
update: { color: '#28b4d7' },
})
@@ -27,9 +31,13 @@ export default function App() {
ref.current.forEach(clearTimeout)
ref.current = []
set([])
- ref.current.push(setTimeout(() => set(['Apples', 'Oranges', 'Kiwis']), 2000))
+ ref.current.push(
+ setTimeout(() => set(['Apples', 'Oranges', 'Kiwis']), 2000)
+ )
ref.current.push(setTimeout(() => set(['Apples', 'Kiwis']), 5000))
- ref.current.push(setTimeout(() => set(['Apples', 'Bananas', 'Kiwis']), 8000))
+ ref.current.push(
+ setTimeout(() => set(['Apples', 'Bananas', 'Kiwis']), 8000)
+ )
}, [])
useEffect(() => {
@@ -41,8 +49,14 @@ export default function App() {
{transitions(({ innerHeight, ...rest }, item) => (
-
- {item}
+
+
+ {item}
+
))}
diff --git a/demo/src/sandboxes/noise/.prettierrc b/demo/src/sandboxes/noise/.prettierrc
deleted file mode 100644
index dd400a7d96..0000000000
--- a/demo/src/sandboxes/noise/.prettierrc
+++ /dev/null
@@ -1,9 +0,0 @@
-{
- "arrowParens": "avoid",
-
- "printWidth": 120,
- "semi": false,
- "singleQuote": true,
- "tabWidth": 2,
- "trailingComma": "es5"
-}
diff --git a/demo/src/sandboxes/noise/src/App.tsx b/demo/src/sandboxes/noise/src/App.tsx
index d0a76ff2d6..0a05ea16b0 100644
--- a/demo/src/sandboxes/noise/src/App.tsx
+++ b/demo/src/sandboxes/noise/src/App.tsx
@@ -23,10 +23,32 @@ export default function App() {
key => (phase === 'enter' && key === 'life' ? { duration: timeout } : config),
+ config: (item, index, phase) => key =>
+ phase === 'enter' && key === 'life' ? { duration: timeout } : config,
})
React.useEffect(() => {
@@ -67,7 +68,8 @@ function MessageHub({