Building a Resizable Panel with Framer Motion

[@greengohm]

Your videos are exceptional in so many ways. Not only you show a variety of different challenges in React, but you go through the problem with us, the viewers. This makes your videos more generic, cause the library will change, but the method to solve the problems should stay useful for a long time. Thank you for that!

[@samselikoff]

You are so welcome, and thank you for such a nice message! ☺

[@nnamdi6739]

the same reason i subscribed

[@SamedGaming]

The way you solve some of the problems really teaches us, the viewers, about not only how to fix the problem itself, but many other small concepts which can help in a long run. Again, awesome video, really enjoyed it!

[@Chavez3d]

I agree and I wish he could teach that skill

[@andrewkodkod]

Sam, great tutorials! I bought your Build UI course. It's fantastic, lots of useful information. I feel like I learned Framer Motion within a week. Just a small tip: Current solution doesn't work with input elements as when you type it changes state and ResizablePanel re-renders. So I found another solution - use `use-resize-observer` instead of `react-use-measure`. In this case, we don't need to use stringified children as key and re-render won't happen.

[@SogMosee]

I can't get it to work with this use-resize-observer, specifically when closing the accordion. The height doesn't shrink back on close. Do you have an example somewhere of how youre using this hook with framer motion?

[@SogMosee]

nvm I think I figured it out. Should look like this: function Item() { const { ref, height } = useResizeObserver(); return ( ... {isOpen && children} ) } Some things to note: - no AnimatePresence needed - two layers of div; ref is attached below height div but above toggled children - height must default to 0 since it is undefined at first, which will break the animation

[@ammargillani509]

You're my favorite KZbinr! Can't wait for your course!!

[@chubbyshady]

We have to protect this man at all costs! He's the only guy on this platform that easily explain complex animations!!!

[@asdasdadgfd]

Sam you are a one of a kind teacher! Does this come as natural as it looks? Extremely grateful for your videos

[@samselikoff]

Thank you! I've been teaching in some capacity since college, but there's also plenty of editing :)

[@tamjuh212]

amazing solution!🙌

[@erikplachta]

Framer is amazing, ty for making it so easy to learn.

[@pedro-eu-mesmo]

Very well explained. I use framer-motion daily and still learned a couple things here. Thank you, mate, great vid!

[@stanleychukwu7424]

you sir is a bundle of Advanced Knowledge!! What a great teacher!! GOD bless you Samuel/Samson!

[@devyb-cc]

Absolutely love it, i like your approach about showing the possible problem that can occur and solving it with explanation why "this" method is the best

[@eternalmangekyo022]

Your videos are so underrated its illegal

[@kelvinpraises]

Soooo Goood!!!! Thanks Sam!

[@csabanagy9890]

You just saved my day. Excellent explanation!

[@revillsimon]

Amazing stuff, thank you

[@mahmoudmohammed6225]

The way you approach the problem is just fantastic! You don't just show the solution. You show your whole thought process which is fascinating to watch. How does one get so good with React? I've been using it for about a year now and while I certainly have gotten a lot better at it. I yet to be even close to your level. So what should I learn. Or what kind of projects outside of work can I build?

[@josephito27]

Hey man, thanks for this video, helped me to solve an issue with a reusable radix dialog size transitions, I even managed to do a back and forth transition for the content in the modal, it looks pretty cool!.

[@falilou_io]

Fisrt time watching one of your videos, liked, subscribed and waiting for the course. I love it

[@rchuhk100]

Thank you for your tutorial! Very helpful!

[@oleksandrluchytskyi6867]

Great example!

[@justine_chang39]

i learned so much

[@mryechkin]

This is awesome. I love these kinds of videos where you take us through your thought process and solve it together with the viewer, lots of great nuggets to take away.

[@aymenbachiri-yh2hd]

THank you so much

[@Rico-cp4xp]

Me during the video: Man, this guy teaches so good." Really tho, you explain things so well 🙏

[@berad6034]

You're really fucking good at this.

[@dmarushchak]

Glad I discovered your channel, you have really nice content, one of the best out there for sure, really enjoying it, thanks for your work, keep it rolling :)

[@gabriellinassi3382]

Wow, awesome!!

[@abdkelanii]

Helpful

[@Human_Evolution-]

You are next level. I'd love a video on your IDE and browser set up. I've never seen a set up so clean. Are you on Mac? I don't think my Windows has that cool panel separator between the IDE and browser. How do you how a browser that looks maximizes (no URL bar, etc)?

[@samselikoff]

Thanks! Yep that's MacOS's fullscreen feature, but I only use it when I record. However I do keep my VSCode very clean.

[@MagiCityProductions]

Very Good!

[@RockRespawn]

Hey Sam, what shortcut did you use at 15:45 to refactor occurrences, that was pretty cool. Also thank you so much for the video the idea of using a jsonified children prop as key sounds brilliant :D

[@samselikoff]

That's VSCode's "Rename Symbol", you can access it from the command palette or press F2!

[@RockRespawn]

@@samselikoff thank you so much Sam really appreciate these videos 🔥

[@SogMosee]

This dude is the bees knees holy shit

[@TheMrbaws]

Hi Sam, thanks for the awesome video!❤ I was surprised that you never mentioned the layout prop from framer-motion in this video. I am not too familiar with it, but isn’t it’s purpose to solve similar problems? Thanks again!

[@samselikoff]

Great question, you know I should have mentioned it because when I first started experimenting I tried many different approaches with layout. But I couldn't get something that worked well. There were some issues of stretching, which you can fix with more nested layouts, but even then I couldn't get it to work how I wanted. This has happened to me in the past and usually when I just go for the slightly less declarative version of measuring height/width and animating height/width explicitly, things work out much much better. Layout has worked for me in situations where everything is being absolutely positioned, but in this case I wanted to explicitly make sure the document reflowed and any content below the box was pushed down. Just my experience so far and I do plan on learning + teaching more about layout, but that's where I am now!

[@TheMrbaws]

@@samselikoff alright, thanks for the detailed reply and this great video!

[@Domynate]

Hey, great video! Any chance you could share your vscode theme?

[@papicisse9107]

Awesome! What’s the command for wrapping elements in a div in Vs Code?

[@swyxTV]

notifications gang checking in

[@shaunvanhuyssteen7966]

Dude do you have any recommendations for where I can learn to view React the way you do? Most courses teach just how to use React but not why it operates the way it does, like how you explain it. I would love to learn more but I don't know where I would even start :)

[@shiyunze7157]

Dan Abramov, one of the React maintainers, shared a lot of React internals. You can probably search for his blog and talks.

[@michalguy]

Is there a reason for the `let` usage over `const`?

[@prashank]

how about extracting all the text in children for the key, maybe even generate a hash out of it?

[@prashank]

there's object-hash on npm that can generate unqiue hash string from an object, that should work too i assume. I don't use react (i am a vue man) so I can't test it :(

[@beke2345]

how can you have a detailed answer to every problem I encounter :DD

[@raymondmichael4987]

Ooohps!! I did already liked this video, I can't like again only comments are allowed 🤩

[@arjunsinghrawate7882]

Is it just me or this guy legit looks like Sebastian Stan (aka Winter Soldier from the MCU)😂🔥🔥

[@chirkov]

Thanks, I can't find this answer in Google

[@saharnahaisi8475]

Does it work with width as well?

[@samselikoff]

You should be able to copy the technique, useMeasure also provides { width} !

[@manishpanchal1098]