Comments (6)
Add way to rerender when isCollapsed changes
The recommended way to do that is like so:
// Your component
const [isCollapsed, setIsCollapsed] = useState(false);
<Panel onCollapse={() => setIsCollapsed(true)} onExpand={() => setIsCollapsed(false)} />
I've written some non-trivial apps with the current API and found it to be pretty easy/efficient to work with (not overly cumbersome).
I dislike having to duplicate "state" like that - the value is already contained and controlled inside your logic, and I dislike having to duplicate those 3 extra things for each panel we need this logic for.
Maybe a solution could be adding a
useResizer
hook that returns theref
, and theisCollapsed
and related booleans as state, allowing anyone who needs to trigger a render to do so.
I understand why you'd prefer not to have the redundant state, but that's a subjective preference and the approach you describe (useResize
) is not one that I'm inclined to add to this library.
If you dislike the "extra state" you could always write a custom hook, or a wrapper/higher-order component, that exposes it in a different way. I think the primary thing that's missing from doing this in a "nice" way is an API to subscribe to changes in collapsed state. I would probably be willing to add that, which would enable you to do this:
const panelRef = useRef(null);
// You could wrap this into a custom hook so you didn't need to repeat it
const isCollapsed = useSyncExternalStore(
(change) => {
const panel = panelRef.current;
if (panel) {
return panel.listenForResize(change);
} else {
return () => {};
}
},
() => panelRef.current?.isCollapsed(),
() => panelRef.current?.isCollapsed(),
);
<Panel ref={panelRef} />
from react-resizable-panels.
That's fine, that's what we do and I figured this would be your reply. Thanks
from react-resizable-panels.
Would you find an API like listenForResize
to be particularly useful?
from react-resizable-panels.
Would that be a way to cover onCollapse/onExpand with a single listener? I'd use that, although depending on how it fires during actual resizing it may get spammy, although we could debounce/etc.
Is there a discord or a more appropriate place to ask questions? Normally I'd use the discussions for some of these things. We've realized that because we use pixel values we need to specifically re-set the panel's size when it's collapsed and the user resizes the window.
from react-resizable-panels.
There is no Discord. Most of my OSS projects are maintained by me alone, so I wouldn't really be able to keep up with a chat. I did just enable the discussion feature though.
from react-resizable-panels.
Would that be a way to cover onCollapse/onExpand with a single listener?
Well, yes, essentially. It would provide a way to listen without mirroring state (if you wanted to write a custom hook for this). Otherwise you'd have to wrap with an HOC (or just copy/paste the mirrored state pattern I showed above).
from react-resizable-panels.
Related Issues (20)
- How to control panel collapse? HOT 2
- Collapsed state resets when new values are provided to collapsedSize/minSize HOT 4
- Version 2.0.0 onClick regression HOT 1
- [Enhancement] Support CSS values for defaultSize, maxSize & minSize HOT 1
- onDragging not working HOT 2
- Issue with conditionally rendered Panels HOT 4
- Example for fixing SSR flicker in NextJS page router HOT 7
- How to change minimum size to collapse the panel HOT 4
- [Example]: Conditional and Collapsible Panels HOT 11
- Can I use conditional rendering with imperative group panel API? HOT 4
- feature request: typed external storage API HOT 1
- onDragging to much calls HOT 3
- Z Index issues HOT 3
- panel seems to get clipped when dragging up HOT 6
- Resizing panel doesn't set the new resize state until clicking on the resize handle (v2.0.0+) HOT 3
- UseLayoutEffect on PanelResizeHandle.ts (SSR) HOT 2
- Tiny layout shift (SSR) HOT 1
- Drag gets priority over overlapping elements HOT 7
- data-panel-size did not match. Server: "null" Client: number HOT 12
- Error: "Failed to execute 'getComputedStyle' on 'Window'" HOT 3
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-resizable-panels.