Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (xy-direction) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

X and Y Components

Why XY?

The X and Y components provide a minimalistic and efficient approach to managing flexbox layouts in React. With a lightweight API, they eliminate boilerplate code and seamlessly integrate with both styled-components and @emotion/styled. Instead of repeatedly defining flex properties, X and Y offer intuitive horizontal and vertical layout utilities, making UI composition easier and more readable.

Key Benefits:

🪶 Ultra Lightweight – Less than 1KB minified and gzipped (excluding peer dependencies).
🚀 Less Boilerplate – No need to write repetitive flexbox styles.
🎯 Lightweight – Minimal dependency footprint for better performance.
🔧 Flexible – Works with both styled-components and @emotion/styled.
📏 Consistent – Provides a structured way to handle layout spacing and alignment.

Installation

You can install the library for either styled-components or @emotion/styled:

For styled-components:

npm install @xy-direction/styled

For @emotion/styled:

npm install @xy-direction/emotion

Then, import and use the X and Y components:

import { X, Y } from "@xy-direction/styled"; // or "@xy-direction/emotion"

Usage

Row (`X`) and Column (`Y`) Components

<X gap="10px" padding="5px" margin="10px">
  <div>Row Item 1</div>
  <div>Row Item 2</div>
</X>

<Y g="10px" p="5px" m="10px">
  <div>Column Item 1</div>
  <div>Column Item 2</div>
</Y>

Props

Prop	Type	Description
`g`	string	Sets the CSS `gap` property.
`gap`	string	Alias for `g`.
`m`	string	Sets the CSS `margin` property.
`margin`	string	Alias for `m`.
`p`	string	Sets the CSS `padding` property.
`padding`	string	Alias for `p`.
`inline`	boolean	Sets `display: inline-flex` if `true`, otherwise `display: flex`.
`wrap`	boolean	Enables `flex-wrap: wrap`.
`shrink`	boolean	Prevents flex shrinking (`flex-shrink: 0`).
`align`	string	Sets `align-items`.
`alignItems`	string	Alias for `align`.
`justify`	string	Sets `justify-content`.
`justifyContent`	string	Alias for `justify`.
`fullWidth`	boolean	Sets `width: 100%`.
`fullHeight`	boolean	Sets `height: 100%`.
`debug`	boolean	Adds a red outline for debugging.

Example with Debugging

<X debug gap="10px" padding="5px" margin="10px">
  <div>Debugging mode</div>
</X>

This will outline the X component in red to help visualize its dimensions.

Debugging with Theme

You can enable debugging globally using a theme:

import { ThemeProvider } from "styled-components"; // or "@emotion/react"
import { X } from "@xy-direction/styled";

const theme = { xyDebug: true };

<ThemeProvider theme={theme}>
  <X gap="10px" padding="5px" margin="10px">
    <div>Debugging with Theme</div>
  </X>
</ThemeProvider>;

When xyDebug is set to true in the theme, all X and Y components will display a red outline for debugging.

Without a Library

If you were to achieve the same layout without using styled-components or @emotion/styled, you would need to write CSS manually:

const X = ({ children, gap, padding, margin }) => (
  <div style={{ display: 'flex', flexDirection: 'row', gap, padding, margin }}>
    {children}
  </div>
);

const Y = ({ children, gap, padding, margin }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap, padding, margin }}>
    {children}
  </div>
);

<X gap="10px" padding="5px" margin="10px">
  <div>Row Item 1</div>
  <div>Row Item 2</div>
</X>

<Y gap="10px" padding="5px" margin="10px">
  <div>Column Item 1</div>
  <div>Column Item 2</div>
</Y>

License

MIT

xy-direction