Skip to content

Commit

Permalink
feat: add height getter to ref
Browse files Browse the repository at this point in the history
  • Loading branch information
stipsan committed Jan 21, 2021
1 parent f6d082e commit 51c8510
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 13 deletions.
26 changes: 26 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,32 @@ ref.current.snapTo(({ snapPoints }) => Math.min(...snapPoints), {
})
```
### height
Type: `number`
The current snap point, in other words the height, of the bottom sheet. This value is updated outside the React render cycle, for performance reasons.
```jsx
export default function Example() {
const sheetRef = React.useRef()
return (
<BottomSheet
ref={sheetRef}
onSpringStart={() => {
console.log('Transition from:', sheetRef.current.height)
requestAnimationFrame(() =>
console.log('Transition to:', sheetRef.current.height)
)
}}
onSpringEnd={() =>
console.log('Finished transition to:', sheetRef.current.height)
}
/>
)
}
```
# Credits
- Play icon used on frame overlays: [font-awesome](https://fontawesome.com/icons/play-circle?style=regular)
Expand Down
22 changes: 9 additions & 13 deletions pages/fixtures/experiments.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -478,7 +478,6 @@ function Twelve() {
const [open, setOpen] = useState(false)
const sheetRef = useRef<BottomSheetRef>()
const [height, setHeight] = useState(0)
const [updating, setUpdating] = useState(false)

return (
<>
Expand All @@ -495,24 +494,21 @@ function Twelve() {
}
onSpringStart={(event) => {
console.log('onSpringStart', event, sheetRef.current.height)
setUpdating(true)
setHeight(sheetRef.current.height)
requestAnimationFrame(() => setHeight(sheetRef.current.height))
if (event.type === 'OPEN') {
setTimeout(() => setHeight(sheetRef.current.height), 100)
}
}}
onSpringCancel={(event) => {
console.log('onSpringCancel', event, sheetRef.current.height)
setHeight(sheetRef.current.height)
}}
onSpringEnd={(event) => {
console.log('onSpringEnd', event, sheetRef.current.height)
setUpdating(false)
setHeight(sheetRef.current.height)
}}
footer={
<div className="w-full text-center">
Height:{' '}
{updating ? (
<del key="height">{height}</del>
) : (
<span key="height">{height}</span>
)}
</div>
}
footer={<div className="w-full text-center">Height: {height}</div>}
>
<SheetContent>
<Expandable>
Expand Down
3 changes: 3 additions & 0 deletions src/BottomSheet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,9 @@ export const BottomSheet = React.forwardRef<
},
})
},
get height() {
return heightRef.current
},
}),
[send]
)
Expand Down
6 changes: 6 additions & 0 deletions src/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -151,4 +151,10 @@ export interface RefHandles {
numberOrCallback: number | ((state: defaultSnapProps) => number),
options?: { source?: string; velocity?: number }
) => void

/**
* Returns the current snap point, in other words the height.
* It's update lifecycle with events are onSpringStart and onSpringCancel will give you the old value, while onSpringEnd will give you the current one.
*/
height: number
}

0 comments on commit 51c8510

Please sign in to comment.