First of all, I apologize if my terminology is not spot-on. And if this is indeed the right place, for questions - but I did not find a mailer. Also, as you can guess I am just treading into the whole SPA realm, and re-com/reagent are godsend for something like that. Thanks!
I want to build a data-driven UI, wherein the children elements in a parent element would be driven by dynamically received data (for e.g. you can imagine a variable number of buttons, in a h-box in a parent v-box). While doing this, to avoid adding a large number of such button children to the h-box, I need to make the rendering logic slightly more reactive, wherein a new row of h-box should be added if they are going to "overflow".
I was hoping to do this, by trying to get the Parent v-box width size and then figure out how much I need for each button (again the label on those buttons can be of varying length), and then figure out if I should move some of those buttons to another row (aka h-box) below.
I tried to get (reagent/current-component) but the only place it seems to work is at the top-most, returning something like ..main-panel (my div name, I guess).
How can I get the react "this" object via reagent further down below? And then use-it for further details like (r/props and r/children?)
Or is there another way, where I can dynamically decide how many children of varying length, I can add ? Or if there was some auto-magical way of wrapping the additional content to the next "line"..like a wrap for elements.
First of all, I apologize if my terminology is not spot-on. And if this is indeed the right place, for questions - but I did not find a mailer. Also, as you can guess I am just treading into the whole SPA realm, and re-com/reagent are godsend for something like that. Thanks!
I want to build a data-driven UI, wherein the children elements in a parent element would be driven by dynamically received data (for e.g. you can imagine a variable number of buttons, in a h-box in a parent v-box). While doing this, to avoid adding a large number of such button children to the h-box, I need to make the rendering logic slightly more reactive, wherein a new row of h-box should be added if they are going to "overflow".
I was hoping to do this, by trying to get the Parent v-box width size and then figure out how much I need for each button (again the label on those buttons can be of varying length), and then figure out if I should move some of those buttons to another row (aka h-box) below.
I tried to get (reagent/current-component) but the only place it seems to work is at the top-most, returning something like ..main-panel (my div name, I guess).
How can I get the react "this" object via reagent further down below? And then use-it for further details like (r/props and r/children?)
Or is there another way, where I can dynamically decide how many children of varying length, I can add ? Or if there was some auto-magical way of wrapping the additional content to the next "line"..like a wrap for elements.
Thanks for you help.