CrabUI
Loading...
Searching...
No Matches
How layout is calculated

Components can be placed relative to parents, and can resize to children

But what if a component needs to do both?

Those back and forth layout calculations are too complex, so i do it in steps with 2 phases:

  • Phase 1: Components resize to absolute props of their children from bottom up
  • Phase 2: Components are resized and placed relative to their parents from top to bottom

That's enough to e.g. make component fit text size, but might not be enough to resize multiple nested wrappers

Main component will run layout update steps until layout is fully resolved to avoid bilnking

If your layout takes more than 10 steps to resolve you will be notified that your code is cringe and that you need to refactor