Layr
Flutter's layout primitives as React components, so a layout reads the way it is drawn.
layr.dynshift.com @dynshift/layr on npm Source on GitHub
Why it exists
React has no layout system of its own. In practice a developer chooses between raw CSS and flexbox, which is powerful but verbose and easy to get subtly wrong; utility class frameworks, which are fast to write and hard to read back; or a full component library, which brings buttons, forms and a theme along with the layout it was wanted for.
Flutter took a different path years ago. Its layout is a small set of
widgets with deterministic, documented rules: a Container
defines bounds and decoration, a Row lays children out
horizontally, a Column vertically, a Stack
layers them. Anyone who has built a screen in Flutter can look at the
widget tree and see the layout. Layr brings exactly that vocabulary to
React, with the same names and, wherever React allows it, the same API.
What is in it
Layout only. Container, Row, Column,
Stack, Positioned, SizedBox,
Padding and Centre, plus the alignment and
sizing enums Flutter developers already know, such as
MainAxisAlignment. There are no buttons, no inputs, no
theming system, and nothing that renders visible chrome of its own. The
library composes with whatever component set a project already uses.
- No dependencies. Plain React components, tree-shakeable, so a project ships only the primitives it imports.
- TypeScript first. Every prop is typed; a width given as a string where a number is expected is an editor error, not a runtime surprise.
- Predictable. Each primitive has one job and documented rules for how it sizes itself and its children, mirroring Flutter's layout algorithm rather than reinterpreting it.
Who it is for
Teams that work in both Flutter and React and want one mental model for layout; and React developers who would rather describe a layout as a tree of intentions than as a cascade of properties. It is not a replacement for a design system. It is the layer underneath one.
Getting it
Install @dynshift/layr from npm. The
Layr site has the documentation, a migration guide for
Flutter developers, and a playground where each primitive can be tried
with live code. The source, issues and pull requests are on
GitHub.