Q: How to use fractional widths with Reflexbox?

Pass fractional numbers like `1/2` to the `w` prop on ` ` components. For example, ` ` sets the width to 50%, and you can combine this with responsive arrays for breakpoints.

Question 1

Does Reflexbox support server-side rendering?

Accepted Answer

No, the higher-order component in Reflexbox does not work in Node.js for SSR. For server-side support, you need to downgrade to version ^2.2.0 or use related libraries like Grid Styled mentioned in the README.

Question 2

How to customize breakpoints in Reflexbox?

Accepted Answer

Use the `<ReflexProvider />` component to pass a custom `breakpoints` array (e.g., `breakpoints={[32, 48, 64]}` in pixels). This allows you to define responsive breakpoints tailored to your design system.

Question 3

Reflexbox vs Material-UI Grid: which should I use?

Accepted Answer

Reflexbox is minimal and focused on flexbox primitives with CSS-in-JS, ideal for lightweight, custom layouts. Material-UI Grid is part of a larger framework with more components and themes, better for projects needing a comprehensive design system out-of-the-box.

Question 4

How to use fractional widths with Reflexbox?

Accepted Answer

Pass fractional numbers like `1/2` to the `w` prop on `` components. For example, `` sets the width to 50%, and you can combine this with responsive arrays for breakpoints.

Question 5

What are the default spacing scales in Reflexbox?

Accepted Answer

The default spacing scale is [0, 8, 16, 32, 64] for margin and padding props from 0-4. You can override this by providing a custom `space` array via `<ReflexProvider />` for consistent design tokens.

Question 6

How to wrap a custom component with Reflexbox styles?

Accepted Answer

Use the `reflex()` higher-order component to wrap any element that accepts `className`. For instance, `const StyledInput = reflex(MyInput)` applies Reflexbox's flexbox and spacing props to your custom component.

Question 7

Is Reflexbox good for building a design system?

Accepted Answer

Yes, for layout primitives, as it offers configurable spacing and breakpoints. However, it's limited to flexbox and lacks broader UI components, so you may need to pair it with other libraries for a complete system.

Reflexbox

What is Reflexbox?

Overview

Use Cases

Best For

Related Projects

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions