Container

Basic usage

The <Container> component establishes a container-type: inline-size, and <Container.Breakpoint [to|from]> will apply display: none depending on the container width.

Resize the examples to see the different elements.

<Container>
  <Container.Breakpoint to="small">to small</Container.Breakpoint>
  <Container.Breakpoint from="small">from small</Container.Breakpoint>
</Container>
<Container>
  <Container.Breakpoint to="small">to small</Container.Breakpoint>
  <Container.Breakpoint from="small">from small</Container.Breakpoint>
</Container>

Breakpoint names

Examples

<Container>
  <Container.Breakpoint from="small">wider than small</Container.Breakpoint>
  <Container.Breakpoint to="small">narrower than small</Container.Breakpoint>
  <Container.Breakpoint from="medium">wider than medium</Container.Breakpoint>
  <Container.Breakpoint to="medium">narrower than medium</Container.Breakpoint>
  <Container.Breakpoint from="large">wider than large</Container.Breakpoint>
  <Container.Breakpoint to="large">narrower than large</Container.Breakpoint>
</Container>
<Container>
  <Container.Breakpoint from="small">wider than small</Container.Breakpoint>
  <Container.Breakpoint to="small">narrower than small</Container.Breakpoint>
  <Container.Breakpoint from="medium">wider than medium</Container.Breakpoint>
  <Container.Breakpoint to="medium">narrower than medium</Container.Breakpoint>
  <Container.Breakpoint from="large">wider than large</Container.Breakpoint>
  <Container.Breakpoint to="large">narrower than large</Container.Breakpoint>
</Container>

You can use both to and from at the same time, to display an element only between two breakpoints.

(Note that if from is larger than to it will never be displayed.)

<Container>
  <Container.Breakpoint to="small">narrower than small</Container.Breakpoint>
  <Container.Breakpoint from="small" to="medium">
    between small and medium
  </Container.Breakpoint>
  <Container.Breakpoint from="medium">wider than medium</Container.Breakpoint>
</Container>
<Container>
  <Container.Breakpoint to="small">narrower than small</Container.Breakpoint>
  <Container.Breakpoint from="small" to="medium">
    between small and medium
  </Container.Breakpoint>
  <Container.Breakpoint from="medium">wider than medium</Container.Breakpoint>
</Container>

Grid layout example

<Grid>
  <Grid cols={3}>
    <Container className="bf-border">
      <Container.Breakpoint to="small">to small</Container.Breakpoint>
      <Container.Breakpoint from="small">from small</Container.Breakpoint>
    </Container>
    <Grid.Span cols={2}>
      <Container className="bf-border">
        <Container.Breakpoint to="small">to small</Container.Breakpoint>
        <Container.Breakpoint from="small">from small</Container.Breakpoint>
      </Container>
    </Grid.Span>
  </Grid>
  <Container className="bf-border">
    <Container.Breakpoint to="small">to small</Container.Breakpoint>
    <Container.Breakpoint from="small">from small</Container.Breakpoint>
  </Container>
</Grid>
<Grid>
  <Grid cols={3}>
    <Container className="bf-border">
      <Container.Breakpoint to="small">to small</Container.Breakpoint>
      <Container.Breakpoint from="small">from small</Container.Breakpoint>
    </Container>
    <Grid.Span cols={2}>
      <Container className="bf-border">
        <Container.Breakpoint to="small">to small</Container.Breakpoint>
        <Container.Breakpoint from="small">from small</Container.Breakpoint>
      </Container>
    </Grid.Span>
  </Grid>
  <Container className="bf-border">
    <Container.Breakpoint to="small">to small</Container.Breakpoint>
    <Container.Breakpoint from="small">from small</Container.Breakpoint>
  </Container>
</Grid>

AutoCol layout example

<AutoCol width={450}>
  <Container className="bf-border">
    <Container.Breakpoint to="small">to small</Container.Breakpoint>
    <Container.Breakpoint from="small">from small</Container.Breakpoint>
  </Container>
  <Container className="bf-border">
    <Container.Breakpoint to="small">to small</Container.Breakpoint>
    <Container.Breakpoint from="small">from small</Container.Breakpoint>
  </Container>
</AutoCol>
<AutoCol width={450}>
  <Container className="bf-border">
    <Container.Breakpoint to="small">to small</Container.Breakpoint>
    <Container.Breakpoint from="small">from small</Container.Breakpoint>
  </Container>
  <Container className="bf-border">
    <Container.Breakpoint to="small">to small</Container.Breakpoint>
    <Container.Breakpoint from="small">from small</Container.Breakpoint>
  </Container>
</AutoCol>

Avoid extra DOM nodes with CSS

Anything <Container> can do, CSS can do better (but less typesafe 😅)

Both <Container> and <Container.Breakpoint> renders a <div> element, which isn't always desirable (especially in grid/flexbox layouts), in which case you can use equivalent CSS class names instead.

The following code renders the same results;

<Container>
  <Container.Breakpoint to="small">to small (Container)</Container.Breakpoint>
  <Container.Breakpoint from="small">from small (Container)</Container.Breakpoint>
</Container>
<div className="bf-container">
  <div className="to-small-container">to small (div)</div>
  <div className="from-small-container">from small (div)</div>
</div>
<Container>
  <Container.Breakpoint to="small">to small (Container)</Container.Breakpoint>
  <Container.Breakpoint from="small">from small (Container)</Container.Breakpoint>
</Container>
<div className="bf-container">
  <div className="to-small-container">to small (div)</div>
  <div className="from-small-container">from small (div)</div>
</div>

Sandbox

import Container from "@intility/bifrost-react/Container";
import AutoCol from "@intility/bifrost-react/AutoCol";

export default function ContainerDemo() {
  return (
    <div style={{ resize: "both" }} className="bf-padding bf-border">
      <Container>
        <Container.Breakpoint to="small">to small</Container.Breakpoint>
        <Container.Breakpoint from="small">from small</Container.Breakpoint>
      </Container>
      <AutoCol width={450}>
        <Container className="bf-border">
          <Container.Breakpoint to="small">to small</Container.Breakpoint>
          <Container.Breakpoint from="small">from small</Container.Breakpoint>
        </Container>
        <Container className="bf-border">
          <Container.Breakpoint to="small">to small</Container.Breakpoint>
          <Container.Breakpoint from="small">from small</Container.Breakpoint>
        </Container>
      </AutoCol>
    </div>
  );
}