Extended Flexbox

import { extendedFlexbox } from 'jynx'

The extendedFlexbox function gives you control of a component's flex styles with additional support for shorthand aliases not found in the base flexbox function.

All the verbose props are still accessible and can be used interchangeably with the aliases; this is simply an extension of the original function that allows the use of a more concise syntax.

Usage

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

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


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

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

Props

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

<Component direction='column' />

As with the flexbox function, when using props like align and justify that support a set of pre-declared string values (flex-start, space-between, etc), these should 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.

Types

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

interface ExtendedFlexboxProps extends FlexboxProps {
  direction?: StyleProp<CSS.Property.FlexDirection>
  flow?: StyleProp<CSS.Property.FlexFlow>
  wrap?: StyleProp<CSS.Property.FlexWrap>
  align?: StyleProp<CSS.Property.AlignItems>
  justify?: StyleProp<CSS.Property.JustifyContent>
  grow?: StyleProp<CSS.Property.FlexGrow>
  shrink?: StyleProp<CSS.Property.FlexShrink>
  basis?: StyleProp<CSS.Property.FlexBasis>
}

API

The extendedFlexbox function allows for a number of props to be passed to your component from directly within your jsx / tsx.

These props are in addition to those available in flexbox.

Examples

/* using plain CSS values */
<Component wrap='nowrap' />


/* based on a conditional */
<Component align={isFullWidth ? 'stretch' : 'flex-start'} />


/* using responsive styles */
<Component justify={['flex-start', 'center', null, 'flex-start']} />

<Component direction={{_: 'column', md: 'row'}} />