-
- {Array.from({ length: 20 })
- .fill(1)
- .map((_, i) => (
- {i}
- ))}
-
-
-
-
-
-
- )}
-
- );
+
+ {Array.from({ length: 20 })
+ .fill(1)
+ .map((_, i) => (
+
+ {i}
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ );
}
function useScrolling() {
- const [isScrolling, setScrolling] = useState(false);
- const timeout = useRef(undefined);
+ const [isScrolling, setScrolling] = useState(false);
+ const timeout = useRef(undefined);
- const onScroll = () => {
- setScrolling(true);
- clearTimeout(timeout.current);
- timeout.current = setTimeout(() => setScrolling(false), 150);
- };
+ const onScroll = () => {
+ setScrolling(true);
+ clearTimeout(timeout.current);
+ timeout.current = setTimeout(() => setScrolling(false), 150);
+ };
- return { onScroll, isScrolling };
+ return { onScroll, isScrolling };
}
const Content = styled.div`
diff --git a/example/src/components/ExampleLayout.tsx b/example/src/components/ExampleLayout.tsx
index 093f9a1..0ef8387 100644
--- a/example/src/components/ExampleLayout.tsx
+++ b/example/src/components/ExampleLayout.tsx
@@ -1,138 +1,138 @@
-import { motion, useScroll, useTransform } from 'motion/react';
-import { type ReactNode, useRef } from 'react';
-import { FiChevronLeft } from 'react-icons/fi';
-import { Link } from 'react-router';
+import { motion, useScroll, useTransform } from "motion/react";
+import { type ReactNode, useRef } from "react";
+import { FiChevronLeft } from "react-icons/fi";
+import { Link } from "react-router";
import {
- type OverlayTriggerState,
- useOverlayTriggerState,
-} from 'react-stately';
-import { createGlobalStyle, styled } from 'styled-components';
+ type OverlayTriggerState,
+ useOverlayTriggerState,
+} from "react-stately";
+import { createGlobalStyle, styled } from "styled-components";
-import { Button, ScrollView } from './common';
+import { Button, ScrollView } from "./common";
type Props = {
- title: string;
- description?: string;
- children: (state: OverlayTriggerState) => ReactNode;
+ title: string;
+ description?: string;
+ children: (state: OverlayTriggerState) => ReactNode;
};
export function ExampleLayout({ title, description, children }: Props) {
- const state = useOverlayTriggerState({});
- const scrollRef = useRef(null);
- const { scrollY } = useScroll({ axis: 'y', container: scrollRef });
- const fabOpacity = useTransform(scrollY, [200, 220], [0, 1]);
- const fabTranslateY = useTransform(scrollY, [200, 220], [20, 0]);
-
- return (
-
-
-
-
- Back
-
-
- {title}
-
- {description && {description}}
-
-
-
-
- Example content to make the page scrollable...
-
-
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae
- sint cupiditate eum quibusdam consequuntur quae! Rem error alias
- placeat aliquid qui facere dicta veniam tenetur suscipit? Quibusdam
- eos est similique excepturi officiis sequi maxime sunt blanditiis
- nulla aperiam rem cum totam eligendi eius voluptatem, dolores
- repellendus! Iste accusantium vero, sint ipsam dicta saepe
- laudantium blanditiis et corporis aliquid deleniti quae vitae
- nostrum, repellat illo explicabo accusamus odit pariatur ex. Placeat
- dolorum in laboriosam repudiandae maiores aut incidunt eos sequi
- consectetur, autem nihil.
-
-
- Quae corrupti veritatis voluptates molestiae ipsam beatae sit quia
- aperiam rem! Natus earum quas, quos rerum nisi nostrum deserunt
- voluptatibus perspiciatis? Hic, animi harum quam, fugit explicabo ab
- accusantium laborum iste rem omnis obcaecati quis earum eligendi in
- inventore, mollitia asperiores numquam amet architecto porro at!
- Minus, non porro. Harum dolor nihil nemo quisquam! Omnis ipsum
- deleniti id laborum incidunt temporibus, ipsa suscipit eius dolorum
- voluptatem aut, voluptas a provident tempore. Voluptas asperiores ea
- delectus. Ipsa laborum error numquam perferendis similique
- voluptates animi suscipit dolore at modi dicta minima, asperiores
- corporis nemo, voluptate repellendus, aspernatur illo quo. Aliquid
- voluptatem excepturi odio accusamus dignissimos expedita eveniet,
- impedit consequatur. Illo fugit placeat possimus est doloremque?
- Veritatis quidem, similique sed non sint architecto aliquam
- doloribus accusamus aspernatur fugit corporis quae voluptates maxime
- at.
-
-
- Aut praesentium, quia architecto ea natus dicta nihil laborum
- tempora animi quas voluptas recusandae adipisci nostrum vero amet,
- nisi temporibus fugit sequi beatae. Natus fugiat ullam nemo neque
- laborum nesciunt, iure totam aut doloribus ea! Fugiat similique eos
- vel dicta maxime? Cumque hic perferendis accusantium molestias
- laboriosam quod consequuntur, cupiditate fuga accusamus cum
- explicabo, magni enim nobis velit numquam atque! Maxime et explicabo
- velit distinctio! Quis ad, ipsa eaque iusto adipisci laboriosam
- fugiat nihil blanditiis explicabo fugit repudiandae. Quaerat odio
- porro doloribus? Perferendis, sit blanditiis. Ab, eligendi impedit.
- Consectetur, officia provident! Sed dignissimos suscipit
- consequuntur fugit ullam odio incidunt quo sint enim. Ratione modi
- aperiam rem non quaerat consectetur, natus maiores impedit et
- exercitationem, suscipit facilis debitis, mollitia in molestiae sunt
- sit cum optio laboriosam? Fugit officia consequuntur eos voluptate,
- quo dicta quas! In nulla sapiente cupiditate sequi!
-
-
- Animi culpa cumque, et voluptas, autem odio tenetur iusto quas amet
- quidem ipsam quos dicta dolorem libero, expedita minima maiores
- exercitationem esse eos. Vero cumque molestias porro iusto neque,
- officiis quaerat nemo. Sunt atque corrupti nobis id sapiente quidem.
- Animi officiis corrupti dicta, excepturi, quod, reprehenderit nam
- sint accusamus deserunt obcaecati beatae illum ipsum minus nisi
- necessitatibus omnis aspernatur eligendi saepe aliquid aperiam.
- Ipsam, perspiciatis? Temporibus iure cumque optio accusamus itaque
- laboriosam nemo facilis earum, asperiores libero. Quia eveniet
- inventore asperiores fuga impedit deserunt iure magni ipsam tenetur.
- Eos omnis officia unde quisquam natus eius beatae aperiam. Facilis
- vitae veniam aut ducimus consequatur excepturi labore modi dolorum
- eveniet? Ex maxime placeat dolore minima hic at necessitatibus
- similique voluptatem facilis, ipsa nisi nihil tempora nemo mollitia
- nulla dolorum dolor fuga cupiditate veniam assumenda, voluptas,
- aspernatur nobis! Minima magni perspiciatis doloribus officia
- veritatis, ratione, quas dolore eos impedit numquam doloremque ex
- delectus!
-
-
-
-
-
-
-
- {children(state)}
-
-
-
-
-
-
-
-
- );
+ const state = useOverlayTriggerState({});
+ const scrollRef = useRef(null);
+ const { scrollY } = useScroll({ axis: "y", container: scrollRef });
+ const fabOpacity = useTransform(scrollY, [200, 220], [0, 1]);
+ const fabTranslateY = useTransform(scrollY, [200, 220], [20, 0]);
+
+ return (
+
+
+
+
+ Back
+
+
+ {title}
+
+ {description && {description}}
+
+
+
+
+ Example content to make the page scrollable...
+
+
+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae
+ sint cupiditate eum quibusdam consequuntur quae! Rem error alias
+ placeat aliquid qui facere dicta veniam tenetur suscipit? Quibusdam
+ eos est similique excepturi officiis sequi maxime sunt blanditiis
+ nulla aperiam rem cum totam eligendi eius voluptatem, dolores
+ repellendus! Iste accusantium vero, sint ipsam dicta saepe
+ laudantium blanditiis et corporis aliquid deleniti quae vitae
+ nostrum, repellat illo explicabo accusamus odit pariatur ex. Placeat
+ dolorum in laboriosam repudiandae maiores aut incidunt eos sequi
+ consectetur, autem nihil.
+
+
+ Quae corrupti veritatis voluptates molestiae ipsam beatae sit quia
+ aperiam rem! Natus earum quas, quos rerum nisi nostrum deserunt
+ voluptatibus perspiciatis? Hic, animi harum quam, fugit explicabo ab
+ accusantium laborum iste rem omnis obcaecati quis earum eligendi in
+ inventore, mollitia asperiores numquam amet architecto porro at!
+ Minus, non porro. Harum dolor nihil nemo quisquam! Omnis ipsum
+ deleniti id laborum incidunt temporibus, ipsa suscipit eius dolorum
+ voluptatem aut, voluptas a provident tempore. Voluptas asperiores ea
+ delectus. Ipsa laborum error numquam perferendis similique
+ voluptates animi suscipit dolore at modi dicta minima, asperiores
+ corporis nemo, voluptate repellendus, aspernatur illo quo. Aliquid
+ voluptatem excepturi odio accusamus dignissimos expedita eveniet,
+ impedit consequatur. Illo fugit placeat possimus est doloremque?
+ Veritatis quidem, similique sed non sint architecto aliquam
+ doloribus accusamus aspernatur fugit corporis quae voluptates maxime
+ at.
+
+
+ Aut praesentium, quia architecto ea natus dicta nihil laborum
+ tempora animi quas voluptas recusandae adipisci nostrum vero amet,
+ nisi temporibus fugit sequi beatae. Natus fugiat ullam nemo neque
+ laborum nesciunt, iure totam aut doloribus ea! Fugiat similique eos
+ vel dicta maxime? Cumque hic perferendis accusantium molestias
+ laboriosam quod consequuntur, cupiditate fuga accusamus cum
+ explicabo, magni enim nobis velit numquam atque! Maxime et explicabo
+ velit distinctio! Quis ad, ipsa eaque iusto adipisci laboriosam
+ fugiat nihil blanditiis explicabo fugit repudiandae. Quaerat odio
+ porro doloribus? Perferendis, sit blanditiis. Ab, eligendi impedit.
+ Consectetur, officia provident! Sed dignissimos suscipit
+ consequuntur fugit ullam odio incidunt quo sint enim. Ratione modi
+ aperiam rem non quaerat consectetur, natus maiores impedit et
+ exercitationem, suscipit facilis debitis, mollitia in molestiae sunt
+ sit cum optio laboriosam? Fugit officia consequuntur eos voluptate,
+ quo dicta quas! In nulla sapiente cupiditate sequi!
+
+
+ Animi culpa cumque, et voluptas, autem odio tenetur iusto quas amet
+ quidem ipsam quos dicta dolorem libero, expedita minima maiores
+ exercitationem esse eos. Vero cumque molestias porro iusto neque,
+ officiis quaerat nemo. Sunt atque corrupti nobis id sapiente quidem.
+ Animi officiis corrupti dicta, excepturi, quod, reprehenderit nam
+ sint accusamus deserunt obcaecati beatae illum ipsum minus nisi
+ necessitatibus omnis aspernatur eligendi saepe aliquid aperiam.
+ Ipsam, perspiciatis? Temporibus iure cumque optio accusamus itaque
+ laboriosam nemo facilis earum, asperiores libero. Quia eveniet
+ inventore asperiores fuga impedit deserunt iure magni ipsam tenetur.
+ Eos omnis officia unde quisquam natus eius beatae aperiam. Facilis
+ vitae veniam aut ducimus consequatur excepturi labore modi dolorum
+ eveniet? Ex maxime placeat dolore minima hic at necessitatibus
+ similique voluptatem facilis, ipsa nisi nihil tempora nemo mollitia
+ nulla dolorum dolor fuga cupiditate veniam assumenda, voluptas,
+ aspernatur nobis! Minima magni perspiciatis doloribus officia
+ veritatis, ratione, quas dolore eos impedit numquam doloremque ex
+ delectus!
+
+
+
+
+
+
+
+ {children(state)}
+
+
+
+
+
+
+
+
+ );
}
const maxWidth = 720;
diff --git a/example/src/components/FullScreen.tsx b/example/src/components/FullScreen.tsx
index 87a8828..8c3b0b9 100644
--- a/example/src/components/FullScreen.tsx
+++ b/example/src/components/FullScreen.tsx
@@ -1,27 +1,27 @@
-import { Sheet } from 'react-modal-sheet';
-import { styled } from 'styled-components';
+import { Sheet } from "react-modal-sheet";
+import { styled } from "styled-components";
-import { BoxList } from './BoxList';
-import { ExampleLayout } from './ExampleLayout';
+import { BoxList } from "./BoxList";
+import { ExampleLayout } from "./ExampleLayout";
export function FullScreen() {
- return (
-
- {({ isOpen, close }) => (
-
-
-
-
-
-
-
-
- )}
-
- );
+ return (
+
+ {({ isOpen, close }) => (
+
+
+
+
+
+
+
+
+ )}
+
+ );
}
const SheetContainer = styled(Sheet.Container)`
diff --git a/example/src/components/ReducedMotion.tsx b/example/src/components/ReducedMotion.tsx
index ac5f032..8d8437d 100644
--- a/example/src/components/ReducedMotion.tsx
+++ b/example/src/components/ReducedMotion.tsx
@@ -1,33 +1,40 @@
-import { Sheet } from 'react-modal-sheet';
-import { styled } from 'styled-components';
+import { Sheet } from "react-modal-sheet";
+import { styled } from "styled-components";
-import { ExampleLayout } from './ExampleLayout';
+import { ExampleLayout } from "./ExampleLayout";
export function ReducedMotion() {
- return (
-
- {({ isOpen, close }) => (
-
-
-
-
-
- {Array.from({ length: 50 })
- .fill(1)
- .map((_, i) => (
- {i}
- ))}
-
-
-
-
-
- )}
-
- );
+ return (
+
+ {({ isOpen, close }) => (
+
+
+
+
+
+ {Array.from({ length: 50 })
+ .fill(1)
+ .map((_, i) => (
+
+ {i}
+
+ ))}
+
+
+
+
+
+ )}
+
+ );
}
const BoxList = styled.div`
diff --git a/example/src/components/Scrollable.tsx b/example/src/components/Scrollable.tsx
index 311bd29..ee96265 100644
--- a/example/src/components/Scrollable.tsx
+++ b/example/src/components/Scrollable.tsx
@@ -1,29 +1,29 @@
-import { Sheet } from 'react-modal-sheet';
+import { Sheet } from "react-modal-sheet";
-import { BoxList } from './BoxList';
-import { ExampleLayout } from './ExampleLayout';
+import { BoxList } from "./BoxList";
+import { ExampleLayout } from "./ExampleLayout";
export function Scrollable() {
- return (
-
- {({ isOpen, close }) => (
-
-
-
-
-
-
-
-
-
- )}
-
- );
+ return (
+
+ {({ isOpen, close }) => (
+
+
+
+
+
+
+
+
+
+ )}
+
+ );
}
diff --git a/example/src/components/ScrollableSnapPoints.tsx b/example/src/components/ScrollableSnapPoints.tsx
index 3a61a99..3f66a8c 100644
--- a/example/src/components/ScrollableSnapPoints.tsx
+++ b/example/src/components/ScrollableSnapPoints.tsx
@@ -1,68 +1,68 @@
-import { useRef, useState } from 'react';
-import { Sheet, type SheetRef } from 'react-modal-sheet';
-import { styled } from 'styled-components';
+import { useRef, useState } from "react";
+import { Sheet, type SheetRef } from "react-modal-sheet";
+import { styled } from "styled-components";
-import { BoxList } from './BoxList';
-import { ExampleLayout } from './ExampleLayout';
-import { Button } from './common';
+import { BoxList } from "./BoxList";
+import { ExampleLayout } from "./ExampleLayout";
+import { Button } from "./common";
const snapPoints = [0, 170, 0.5, -200, 1];
const initialSnap = 1;
const lastSnap = snapPoints.length - 1;
export function ScrollableSnapPoints() {
- const [currentSnap, setCurrentSnap] = useState(initialSnap);
- const sheetRef = useRef(null);
- const snapTo = (i: number) => sheetRef.current?.snapTo(i);
+ const [currentSnap, setCurrentSnap] = useState(initialSnap);
+ const sheetRef = useRef(null);
+ const snapTo = (i: number) => sheetRef.current?.snapTo(i);
- return (
-
- {({ isOpen, close }) => (
-
-
-
+ return (
+
+ {({ isOpen, close }) => (
+
+
+
- state.currentSnap !== lastSnap}
- >
-
-
- Current snap point: {currentSnap}
-
- Content is only scrollable at the upmost snap point
-
-
-
+ state.currentSnap !== lastSnap}
+ >
+
+
+ Current snap point: {currentSnap}
+
+ Content is only scrollable at the upmost snap point
+
+
+
-
-
+
+
-
-
-
-
- )}
-
- );
+
+
+
+
+ )}
+
+ );
}
const Header = styled.div`
diff --git a/example/src/components/ShadowDOM.tsx b/example/src/components/ShadowDOM.tsx
index 8aaff33..b6690bc 100644
--- a/example/src/components/ShadowDOM.tsx
+++ b/example/src/components/ShadowDOM.tsx
@@ -1,92 +1,95 @@
-import { useEffect, useState } from 'react';
-import { Sheet } from 'react-modal-sheet';
+import { useEffect, useState } from "react";
+import { Sheet } from "react-modal-sheet";
-import { ExampleLayout } from './ExampleLayout';
+import { ExampleLayout } from "./ExampleLayout";
export function ShadowDOM() {
- const shadowRoot = useShadowRoot();
+ const shadowRoot = useShadowRoot();
- return (
-
- {({ isOpen, close }) => (
- <>
- {/* Render the Sheet only when the shadowRoot is ready */}
- {shadowRoot && (
-
-
-
-
- {/* We used inline styles because the CSS in document.head is outside the shadow DOM */}
-
- {Array.from({ length: 50 }).map((_, i) => (
-
- {i}
-
- ))}
-
-
-
-
-
- )}
-
- )}
-
- );
+ return (
+
+ {({ isOpen, close }) => (
+ <>
+ {/* Render the Sheet only when the shadowRoot is ready */}
+ {shadowRoot && (
+
+
+
+
+ {/* We used inline styles because the CSS in document.head is outside the shadow DOM */}
+