feat: add useScroll, useResize & useInView hooks (#2038)

.changeset/fresh-knives-suffer.md

@@ -0,0 +1,16 @@
+---
+'@react-spring/core': minor
+'@react-spring/shared': minor
+'@react-spring/web': minor
+'@react-spring/animated': minor
+'@react-spring/parallax': minor
+'@react-spring/rafz': minor
+'react-spring': minor
+'@react-spring/types': minor
+'@react-spring/konva': minor
+'@react-spring/native': minor
+'@react-spring/three': minor
+'@react-spring/zdog': minor
+---
+
+feat: add viewbox as animatable fluid prop

.changeset/metal-suns-type.md

@@ -0,0 +1,16 @@
+---
+'@react-spring/core': minor
+'@react-spring/shared': minor
+'@react-spring/web': minor
+'@react-spring/animated': minor
+'@react-spring/parallax': minor
+'@react-spring/rafz': minor
+'react-spring': minor
+'@react-spring/types': minor
+'@react-spring/konva': minor
+'@react-spring/native': minor
+'@react-spring/three': minor
+'@react-spring/zdog': minor
+---
+
+feat: add useInView hook

.changeset/shy-cars-promise.md

@@ -0,0 +1,16 @@
+---
+'@react-spring/core': minor
+'@react-spring/shared': minor
+'@react-spring/web': minor
+'@react-spring/animated': minor
+'@react-spring/parallax': minor
+'@react-spring/rafz': minor
+'react-spring': minor
+'@react-spring/types': minor
+'@react-spring/konva': minor
+'@react-spring/native': minor
+'@react-spring/three': minor
+'@react-spring/zdog': minor
+---
+
+feat: add useResize hook

demo/custom.d.ts

@@ -1 +1,2 @@
 declare module 'vec-la'
+declare module '*.scss'

demo/package.json

@@ -26,6 +26,7 @@
  "react-feather": "^2.0.10",
  "react-use-gesture": "^9.1.3",
  "react-use-measure": "^2.1.1",
+ "react95": "^4.0.0",
  "sass": "^1.56.1",
  "styled-components": "^5.3.6",
  "three": "^0.146.0",

demo/src/App.jsx

@@ -37,7 +37,9 @@ import Noise from './sandboxes/noise/src/App'
 import Parallax from './sandboxes/parallax/src/App'
 import ParallaxVert from './sandboxes/parallax-vert/src/App'
 import ParallaxSticky from './sandboxes/parallax-sticky/src/App'
+import PopupModal from './sandboxes/popup-modal/src/App'
 
+import ScrollingWave from './sandboxes/scrolling-wave/src/App'
 import SimpleTransition from './sandboxes/simple-transition/src/App'
 import Slide from './sandboxes/slide/src/App'
 import SvgFilter from './sandboxes/svg-filter/src/App'
@@ -79,7 +81,9 @@ const links = {
  parallax: Parallax,
  'parallax-sticky': ParallaxSticky,
  'parallax-vert': ParallaxVert,
+ 'popup-modal': PopupModal,
  'rocket-decay': DecayRocket,
+ 'scrolling-wave': ScrollingWave,
  'simple-transition': SimpleTransition,
  slide: Slide,
  'smile-grid': SmileGrid,

demo/src/index.css

@@ -3,6 +3,7 @@ body,
 #root {
  height: 100%;
  width: 100%;
+ overflow: auto;
 }
 
 body {

demo/src/sandboxes/notification-hub/package.json

@@ -15,7 +15,7 @@
  "react-dom": "^18.0.0",
  "react-feather": "2.0.9",
  "react-scripts": "5.0.1",
- "styled-components": "^5.2.3"
+ "styled-components": "^5.3.6"
  },
  "scripts": {
  "start": "react-scripts start",
@@ -30,8 +30,9 @@
  "not op_mini all"
  ],
  "devDependencies": {
- "@types/react": "^18.0.8",
- "@types/react-dom": "^18.0.3",
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.9",
+ "@types/styled-components": "^5.1.26",
  "typescript": "^4.8.3"
  }
 }

demo/src/sandboxes/popup-modal/.prettierrc

@@ -0,0 +1,9 @@
+{
+ "arrowParens": "avoid",
+ "jsxBracketSameLine": true,
+ "printWidth": 120,
+ "semi": false,
+ "singleQuote": true,
+ "tabWidth": 2,
+ "trailingComma": "es5"
+}

demo/src/sandboxes/popup-modal/custom.d.ts

@@ -0,0 +1 @@
+declare module '*.scss'

demo/src/sandboxes/popup-modal/package.json

@@ -0,0 +1,38 @@
+{
+ "name": "Popup Modal",
+ "version": "1.0.0",
+ "main": "src/index.tsx",
+ "description": "Animate on intersections with the viewport",
+ "keywords": [
+ "useInView",
+ "useSpring",
+ "Windows95",
+ "styled-components"
+ ],
+ "dependencies": {
+ "@react-spring/web": "*",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0",
+ "react-scripts": "5.0.1",
+ "react95": "^4.0.0",
+ "styled-components": "^5.3.6"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ },
+ "browserslist": [
+ ">0.2%",
+ "not dead",
+ "not ie <= 11",
+ "not op_mini all"
+ ],
+ "devDependencies": {
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.9",
+ "@types/styled-components": "^5.1.26",
+ "typescript": "^4.8.3"
+ }
+}

demo/src/sandboxes/popup-modal/public/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+ <meta name="theme-color" content="#000000" />
+ <!--
+ manifest.json provides metadata used when your web app is added to the
+ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+ -->
+ <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+ <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+ <!--
+ Notice the use of %PUBLIC_URL% in the tags above.
+ It will be replaced with the URL of the `public` folder during the build.
+ Only files inside the `public` folder can be referenced from the HTML.
+
+ Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+ work correctly both with client-side routing and a non-root public URL.
+ Learn how to configure a non-root public URL by running `npm run build`.
+ -->
+ <title>React Spring Sandbox</title>
+ </head>
+
+ <body>
+ <noscript> You need to enable JavaScript to run this app. </noscript>
+ <div id="root"></div>
+ <!--
+ This HTML file is a template.
+ If you open it directly in the browser, you will see an empty page.
+
+ You can add webfonts, meta tags, or analytics to this file.
+ The build step will place the bundled scripts into the <body> tag.
+
+ To begin the development, run `npm start` or `yarn start`.
+ To create a production bundle, use `npm run build` or `yarn build`.
+ -->
+ </body>
+</html>

demo/src/sandboxes/popup-modal/src/App.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import { styleReset } from 'react95'
+import styled, { createGlobalStyle, ThemeProvider } from 'styled-components'
+
+import original from 'react95/dist/themes/original'
+// @ts-ignore
+import ms_sans_serif from 'react95/dist/fonts/ms_sans_serif.woff2'
+// @ts-ignore
+import ms_sans_serif_bold from 'react95/dist/fonts/ms_sans_serif_bold.woff2'
+
+import { Title } from './components/Title'
+import { Window } from './components/Window'
+
+const GlobalStyles: any = createGlobalStyle`
+ @font-face {
+ font-family: 'ms_sans_serif';
+ src: url('${ms_sans_serif}') format('woff2');
+ font-weight: 400;
+ font-style: normal
+ }
+ @font-face {
+ font-family: 'ms_sans_serif';
+ src: url('${ms_sans_serif_bold}') format('woff2');
+ font-weight: bold;
+ font-style: normal
+ }
+ body, input, select, textarea {
+ font-family: 'ms_sans_serif';
+ }
+ ${styleReset}
+`
+
+const PAGE_TITLES = ["Don't", 'you', 'just', 'hate', 'popups?']
+
+const ThemeProviderProxy: any = ThemeProvider
+
+export default function App() {
+ return (
+ <div>
+ <GlobalStyles />
+ <ThemeProviderProxy theme={original}>
+ {PAGE_TITLES.map(title => (
+ <Page key={title}>
+ <Title>{title}</Title>
+ </Page>
+ ))}
+ <Page>
+ <Window />
+ </Page>
+ </ThemeProviderProxy>
+ </div>
+ )
+}
+
+const Page = styled.div`
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ & > h2 {
+ font-size: 10vw;
+ }
+`

demo/src/sandboxes/popup-modal/src/components/Title.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import { useInView, animated } from '@react-spring/web'
+
+import { buildInteractionObserverThreshold } from '../helpers/threshold'
+
+export const Title = ({ children }: { children: React.ReactNode }) => {
+ const [ref, springs] = useInView(
+ () => ({
+ from: {
+ opacity: 0,
+ y: 80,
+ },
+ to: {
+ opacity: 1,
+ y: 0,
+ },
+ }),
+ {
+ rootMargin: '-45% 0px -45% 0px',
+ amount: buildInteractionObserverThreshold(),
+ }
+ )
+
+ return (
+ <animated.h2 ref={ref} style={springs}>
+ {children}
+ </animated.h2>
+ )
+}

demo/src/sandboxes/popup-modal/src/components/Window.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { useInView, useSpring, animated } from '@react-spring/web'
+import { Window as Window95, WindowContent, WindowHeader } from 'react95'
+
+import { buildInteractionObserverThreshold } from '../helpers/threshold'
+
+const AnimatedWindow = animated(Window95)
+
+export const Window = () => {
+ const [ref, isInView] = useInView({
+ rootMargin: '-45% 0px -45% 0px',
+ amount: buildInteractionObserverThreshold(),
+ })
+
+ const styles = useSpring({
+ scale: isInView ? 1.5 : 0,
+ config: {
+ tension: 300,
+ },
+ })
+
+ return (
+ <AnimatedWindow style={styles} ref={ref} className="window">
+ <WindowHeader active={false} className="window-title">
+ <span>oh-no.exe</span>
+ </WindowHeader>
+ <WindowContent>Surprise!</WindowContent>
+ </AnimatedWindow>
+ )
+}

demo/src/sandboxes/popup-modal/src/helpers/threshold.ts

@@ -0,0 +1,11 @@
+export const buildInteractionObserverThreshold = (count = 100) => {
+ const threshold = []
+
+ const parts = 1 / count
+
+ for (let i = 0; i <= count; i++) {
+ threshold.push(parseFloat((parts * i).toFixed(2)))
+ }
+
+ return threshold
+}

demo/src/sandboxes/popup-modal/src/index.css

@@ -0,0 +1,17 @@
+html,
+body,
+#root {
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ font-family: system-ui;
+ margin: 0;
+}
+
+*,
+*:after,
+*:before {
+ box-sizing: border-box;
+}

demo/src/sandboxes/popup-modal/src/index.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+const rootElement = document.getElementById('root')!
+
+createRoot(rootElement).render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+)

demo/src/sandboxes/popup-modal/tsconfig.json

@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "outDir": "build/dist",
+ "module": "esnext",
+ "target": "es5",
+ "lib": ["es6", "dom"],
+ "sourceMap": true,
+ "allowJs": true,
+ "jsx": "react",
+ "moduleResolution": "node",
+ "rootDir": "src",
+ "forceConsistentCasingInFileNames": true,
+ "noImplicitReturns": true,
+ "noImplicitThis": true,
+ "noImplicitAny": true,
+ "strictNullChecks": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "noUnusedLocals": true
+ }
+}