xs={0} or md={0} for hide

[ivansglazunov]

Why not make it easy to hide elements at certain screen sizes? Please please please :)

[oliverbenns]

Not sure about the props. In the past I've created <Visible> or <Hidden> elements. This might be a better approach? Not sure if that really fits in with the scope of this project though, but I certainly appreciate the need for it.

E.g.

<Visible xs sm>
    <h1>Only on mobile!</h1>
</Visible>

[arjshiv]

👍 This would be very useful

[silvenon]

@arjshiv follow #82 for news about this. The feature has not yet landed it flexboxgrid itself, as I understood.

[arjshiv]

@silvenon Thanks!

In the meantime, I'm using a solution similar to @oliverbenns, but with a pure CSS show-on-mobile / hide-on-mobile class that toggles display using media queries. As much as I'd like a pure React solution, this helps me solve this quickly for mobile screens without extra React components to handle display.

[lfender6445]

@ivansglazunov i really liked your proposal so I wanted to share this snippet which wraps the original component adding support for something like: <Col small={0} large={12} />

I simplified the API to small and large distinctions because I only care about distinguishing phones from tablets and desktops, but feel free to modify it for your needs

Usage:

<Col small={0} large={12} /> /* displays only on medium/large devices (tablets, desktops, large monitors) */
<Col small={12} large={0} /> /* displays only on phones/small devices (phones) */

import React, { PureComponent, PropTypes } from 'react'

import {
  Grid,
  Row,
  Col as FlexCol,
} from 'react-flexbox-grid'

import cn from 'classnames'

class Col extends PureComponent {
  // NOTE: add /fleboxgrid/ to css loader webpack config before use
  // https://github.com/roylee0704/react-flexbox-grid#minimal-configuration

  static propTypes: {
    className: PropTypes.string,
    // less than 768px (phones)
    xs: PropTypes.number,
    // min width of 768px (tablets)
    sm: PropTypes.number,
    // min width of 1024px (laptops/desktops)
    md: PropTypes.number,
    // min width of 1200px (large monitors)
    lg: PropTypes.number,
    // less than 768px (phones)
    small: PropTypes.number,
    // more than 768px (anything larger than a phone)
    large: PropTypes.number,
  }

  get mappedProps() {
    const clonedProps = Object.assign({}, this.props)
    const newProps = {}

    const { small, large } = this.props

    if (typeof small === 'number') {
      if (small <= 0) {
        newProps.className = cn(this.props.className, 'hideOnSmall')
      } else {
        newProps.xs = small
      }
    }

    if (typeof large === 'number') {
      if (large <= 0) {
        newProps.className = cn(this.props.className, 'hideOnLarge')
      }
      newProps.sm = large
      newProps.md = large
      newProps.lg = large
    }

    delete clonedProps.small
    delete clonedProps.large

    return {
      ...clonedProps,
      ...newProps,
    }
  }

  render() {
    return (
      <FlexCol {...this.mappedProps} />
    )
  }
}

export { Row, Col }
export default Grid

From here you can easily toggle display via class toggles and media queries:

/* global.css */
@media screen and (max-width: 768px) {
  :global .hideOnMobile {
    display: none;
  }
}

@media screen and (min-width: 768px) {
  :global .hideOnLarge {
    display: none;
  }
}

[tawanorg]

+1

Please merge!

[benoj]

This has been a long time coming? Seems like flexbox css has been abandoned – does that mean this project is going to become stale too?

[anton6]

Should this issue be marked as closed in favour of #138?

Just use className with any of these in your Column or Row:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.hidden-xl

Fore more info: imevro/flexboxgrid2#4

[isaachinman]

Any update on this? Is this project still maintained?

[marcramser]

Would still be useful

[jpcmf]

Very useful