Layout

Style a component's layout properties

import { layout } from 'jynx'

The layout function gives you control of a component's layout styles, providing support for all layout-related properties including width, height, display, transform and overflow.

Usage

To use the layout function, create a component using the LayoutProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { layout, LayoutProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<LayoutProps>`
    ${layout}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<LayoutProps>((props) => `
    ${layout}
  `)

Props

By default, when passing a string to any layout props, the raw css value is used. This means you can define layout styles however you normally would:

<Component display='inline-flex' />

For any width or height related props, a numeric value can also be passed.

numbers passed to width or height that are between 0 and 1 are converted to percentages (e.g. 0.4 => '40%')
when a space scale is defined as an array, numbers between 0 and space.length are used as an index
when a space scale is not defined or is not an array, the original number is used
in all instances, numeric values are converted to a px string where necessary

When using props like display and verticalAlign that support a set of pre-declared string values (block, inline, etc), these will be provided as suggestions in your IDE.

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can also create a space scale within your theme, which is then accessible from the width and height related props.

This can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* simple array-based scale */
export const theme = {
  space: [2, 4, 8, 12, 16, 24, 32, 48, 64, 72]
}

/* simple object-based scale */
export const theme = {
  space: {
    extraSmall: '0.25rem',
    small: '0.5rem',
    medium: '1rem',
    large: '2rem',
    extraLarge: '4rem'
  }
}

Types

When working in typescript, use the LayoutProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface LayoutProps {
  width?: StyleProp<CSS.Property.Width<string | 0 | number> | ThemeValue<'space'>>
  height?: StyleProp<CSS.Property.Height<string | 0 | number> | ThemeValue<'space'>>
  minWidth?: StyleProp<CSS.Property.MinWidth<string | 0 | number> | ThemeValue<'space'>>
  minHeight?: StyleProp<CSS.Property.MinHeight<string | 0 | number> | ThemeValue<'space'>>
  maxWidth?: StyleProp<CSS.Property.MaxWidth<string | 0 | number> | ThemeValue<'space'>>
  maxHeight?: StyleProp<CSS.Property.MaxHeight<string | 0 | number> | ThemeValue<'space'>>
  display?: StyleProp<CSS.Property.Display>
  transform?: StyleProp<CSS.Property.Transform>
  transformOrigin?: StyleProp<CSS.Property.TransformOrigin>
  overflow?: StyleProp<CSS.Property.Overflow>
  overflowX?: StyleProp<CSS.Property.OverflowX>
  overflowY?: StyleProp<CSS.Property.OverflowY>
  verticalAlign?: StyleProp<CSS.Property.VerticalAlign>
}

The layout function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	Shorthand	CSS Property	Theme Scale
width	w	width	space
height	h	height	space
minWidth	minW	min-width	space
minHeight	minH	min-height	space
maxWidth	maxW	max-width	space
maxHeight	maxH	max-height	space
display	d	display
transform	t	transform
transformOrigin		transform-origin
overflow		overflow
overflowX		overflow-x
overflowY		overflow-y
verticalAlign	vAlign	vertical-align

Examples