Components

StartEnd

StartEnd provides a simple way to align components to the start and end of a container.

Examples #

Import Syntax #

import StartEnd from 'mineral-ui/StartEnd';

Note

Layout components, like StartEnd, have no visual style. They are rendered with background colors and borders in the examples below for illustrative purposes.

Basic Usage #

StartEnd arranges its children at the start (left, for left-to-right languages) and end of a container.

Start
End
<StartEnd>
  <Box>Start</Box>
  <Box>End</Box>
</StartEnd>

Priority #

By default, neither child will stretch to fill the available width. Set the priority prop to choose which child, if any, will stretch.

Start
End
Start
End
Start
End
<DemoLayout>
  <StartEnd priority="start">
    <Box>Start</Box>
    <Box>End</Box>
  </StartEnd>
  <StartEnd priority="end">
    <Box>Start</Box>
    <Box>End</Box>
  </StartEnd>
  <StartEnd priority="both">
    <Box>Start</Box>
    <Box>End</Box>
  </StartEnd>
</DemoLayout>

Align Items #

The alignItems prop defines the alignment of items along the cross axis (vertical, if direction is row; horizontal, if direction is column).

Start
End
Start
End
Start
End
Start
End
() => {
  const propValues = [
    'stretch', // default
    'start',
    'center',
    'end'
  ];

  const renderStartEnds = () =>
    propValues.map((value, index) => (
      <StartEnd alignItems={value} key={index}>
        <Box>Start</Box>
        <Box>End</Box>
      </StartEnd>
    ));

  return <DemoLayout>{renderStartEnds()}</DemoLayout>;
}

Direction #

While the primary purpose of StartEnd is to arrange its children on the left/right of a container, changing direction to column can be helpful in responsive scenarios.

Start
End
<StartEnd direction="column">
  <Box>Start</Box>
  <Box>End</Box>
</StartEnd>

Responsive #

Many of the properties for StartEnd can be responsive:

  1. Provide an array of breakpoints, which will be used in the (min-width) media queries used for responsive properties.
  2. Those breakpoint values can either be a number (converted to px) or a key from the theme (e.g. the default mineralTheme has 'narrow', 'medium', and 'wide').
  3. For each responsive property, instead of passing a single value, pass an array of values that is one longer than the breakpoints array. The first value applies when no breakpoint matches, the second value applies when the first breakpoint matches, and so on.
  4. If you don't need to change a value at a breakpoint, you can pass null to skip that breakpoint for that property.

The code in the example below exhibits the following behavior:

  1. When the viewport is less than 800px wide, it will display as a column.
  2. When the viewport is at least 800px wide, it will display as a row.
Start
End
<StartEnd
  breakpoints={[800]}
  direction={['column', 'row']}>
  <Box>Start</Box>
  <Box>End</Box>
</StartEnd>

Bidirectionality #

StartEnd reverses its alignment when the direction theme variable is set to rtl (right-to-left).

بداية
النهاية
<div dir="rtl">
  <ThemeProvider theme={{ direction: 'rtl' }}>
    <StartEnd>
      <Box>بداية</Box>
      <Box>النهاية</Box>
    </StartEnd>
  </ThemeProvider>
</div>

API & Theme #

StartEnd Props #

The StartEnd component takes the following React props.

NameTypeDefaultDescription
breakpointsArray<number | string>

Media query (min-width) breakpoints along which to apply props marked "[Responsive-capable]"

childrenReact$Node

Must be exactly two nodes

direction

Direction of flow of items along the main axis [Responsive-capable]

priority'both' | 'end' | 'start'

Determines which side stretches to fill the available width

Note

In addition to the props above, StartEnd also accepts all props for Flex, except justifyContent and wrap.

Undocumented properties will be applied to the root element.

Usage #

When/How to Use #

StartEnd, as its name suggests, aligns content to the start and end of a container. One side's content will fill the available width, while the other will shrink to the smallest width possible.

Best Practices #

Use StartEnd to align content to the left and right of a container.