PrimeAcademy / pinnacles-syllabus

1 stars 0 forks source link

Make a component aware of its own width #11

Closed danielmrichter closed 1 month ago

danielmrichter commented 1 month ago

Describe the Issue!

What do you want to happen? A responsive grid to render according to width provided to it, which it has to know based on user vw... but I can't pass vw as a setting because of how the drag and drop library works.

It requires a width prop provided to it. This makes it so that it can render a grid with a reactive width dependent on window size... and then rerender it if the size changes. There's one that is provided with the library I'm using, Here, but it doesn't appear to be working. It throws an error, or freaks out (see gif below for example of the only way I can get it to render).

Also, this is fairly narrow and I can simply hard code it and move on with my life.

TL:DR This is a kind of narrow question. Is there a simple higher order component or React hook that you've worked with that can tell a component the width of the container it's in so that it can be passed as a prop to it?

What is actually happening?

bug

I have to hard code the width, which kind of sucks.

What have you tried? Who have you asked?

Google, but I'm not 100% sure if there is a project that will work since the ones I found seem to be dead.

What branch is your code on? Did you git push?

https://github.com/danielmrichter/StoryBoard/tree/widthprovider

danielmrichter commented 1 month ago

Thanks Dane! Was using a piece of state that was forcing it to re-render the DOM (was using it to track the layout when the event "onDragStart" fires to be able to revert layout on an error server side).