diff --git a/README.md b/README.md index 0ab3366c..8d45ef38 100644 --- a/README.md +++ b/README.md @@ -205,6 +205,12 @@ Fired on: `CLOSE`. The `yin` to `onSpringStart`'s `yang`. It has the same characteristics. Including `async/await` and Promise support for delaying a transition. For `CLOSE` it gives you a hook into the step right after it has cleaned up everything after itself, and right before it unmounts itself. This can be useful if you have some logic that needs to perform some work before it's safe to unmount. +### skipInitialTransition + +Type: `boolean` + +By default the initial open state is always transitioned to using an spring animation. Set `skipInitialTransition` to `true` and the initial `open` state will render as if it were the default state. Useful to avoid scenarios where the opening transition would be distracting. + ## ref Methods available when setting a `ref` on the sheet: diff --git a/pages/fixtures/scrollable.tsx b/pages/fixtures/scrollable.tsx index 109687e0..05b7ee50 100644 --- a/pages/fixtures/scrollable.tsx +++ b/pages/fixtures/scrollable.tsx @@ -85,6 +85,7 @@ const ScrollableFixturePage: NextPage = ({ } ref={sheetRef} initialFocusRef={focusRef} diff --git a/src/index.tsx b/src/index.tsx index bf861667..50e20472 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -9,7 +9,7 @@ export type { RefHandles as BottomSheetRef } from './types' // Because SSR is annoying to deal with, and all the million complaints about window, navigator and dom elenents! export const BottomSheet = forwardRef(function BottomSheet( - { onSpringStart, onSpringEnd, ...props }, + { onSpringStart, onSpringEnd, skipInitialTransition, ...props }, ref ) { // Mounted state, helps SSR but also ensures you can't tab into the sheet while it's closed, or nav there in a screen reader @@ -23,7 +23,7 @@ export const BottomSheet = forwardRef(function BottomSheet( // It's only when initialState and props.open is mismatching that a intial transition should happen // If they match then transitions will only happen when a user interaction or resize event happen. const initialStateRef = useRef<'OPEN' | 'CLOSED'>( - props.open ? 'OPEN' : 'CLOSED' + skipInitialTransition && props.open ? 'OPEN' : 'CLOSED' ) // Using layout effect to support cases where the bottom sheet have to appear already open, no transition diff --git a/src/types.ts b/src/types.ts index 87d5337e..19300dc3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -107,6 +107,9 @@ export type Props = { /* Configures body-scroll-lock to reserve scrollbar gap by setting padding on , clears when closing the bottom sheet. on by default iff blocking=true */ reserveScrollBarGap?: boolean + + /* Open immediatly instead of initially animating from a closed => open state, useful if the bottom sheet is visible by default and the animation would be distracting */ + skipInitialTransition?: boolean } & Omit, 'children'> export interface RefHandles {