Comments (6)
You're welcome 🙂
I'll think about it, I don't want to increase the complexity too much yet as I got some other ideas I want to explore first.
For now you could store a reference to the snap points yourself, and keep track of any other variable you need:
export default function Example() {
const snapPointsRef = React.useRef([]);
return (
<BottomSheet
snapPoints={({ minHeight, maxHeight }) => {
const snapPoints = [minHeight, maxHeight];
snapPointsRef.current = snapPoints;
return snapPoints;
}}
/>
);
}
The snapPoints
function is always called whenever any of its arguments changes. The only thing to remember is that the real snap points are filtered and do not contain illegal variables. In most cases this isn't a problem, but should it turn out to be you could use the defaultSnap
function to access snapPoints
:
export default function Example() {
const snapPointsRef = React.useRef([]);
return (
<BottomSheet
defaultSnap={({ lastSnap, snapPoints }) => {
snapPointsRef.current = snapPoints;
return lastSnap || Math.max(...snapPoints);
}}
/>
);
}
from react-spring-bottom-sheet.
Hi! There isn't a way to do that atm but I'll add it 😄
Stay tuned 👍
from react-spring-bottom-sheet.
🎉 This issue has been resolved in version 3.2.0 🎉
The release is available on:
Your semantic-release bot 📦🚀
from react-spring-bottom-sheet.
Thanks for looking into this but your release solves a different issue.
MY USE CASE:
I'm using two snapPoints
to fake open and close the bottomsheet.
When SNAP
event is detected, depending on what snapPoint
the bottomsheet snaps to (doesn't matter the source),
I want to change my app state accordingly (min snapPoint - closed, max snapPoint - open)
.
Hence, I will like the snapPoint
to be exposed or be a payload of the SNAP
event.
Thanks again.
from react-spring-bottom-sheet.
Hey, you can access the current snap point on ref.current.height
:)
from react-spring-bottom-sheet.
Oh I didn't see that, thanks.
Okay what about accessing the defined snapPoints
?
Supposing my snapPoints
are derived from the maxHeight
and headerHeight
,
And I need to compare them in the SNAP
event to the current snapPoint.
If I store the defined snapPoints
in state, I'll have to always update it whenever the sheet resizes I guess.
Maybe you could also expose the other params minHeight
, maxHeight
, footerHeight
the same way as the height
?
Or even the snapPoints
in a getter function.
from react-spring-bottom-sheet.
Related Issues (20)
- Focus trap is not working after changing `blocking`
- requires tap to show on screen -- Android chrome
- Dragging should only work in Dragger Container . Should not draggable in Backdrop.
- BottomSheet resets to previous snap point when trying to track height
- Need Unit Test
- Looks like react-use-gesture is depreciated
- Allow setting an z-Index HOT 5
- Adding contentHeight and headerHeight to ref
- Font wont apply to RSBS HOT 3
- When initialFocusRef is false, elements outside the popup are tabbable despite blocking being enabled HOT 1
- Horizontal scrolling is not working properly when full size is introduced in snapPointList
- conditional fetching with onSpringStart it make glitching issue or ropen twice the bottomsheet HOT 2
- Update dependencies
- How to prevent close? HOT 1
- Doesn't work in React Vite HOT 4
- New maintainer? HOT 1
- Getting height of BottomSheet while transition HOT 1
- show children of bottom sheet when is closed without bottom sheet parent
- Please update the React to latest version HOT 1
- TypeError: Cannot read properties of undefined (reading 'getValue') HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spring-bottom-sheet.