-
Notifications
You must be signed in to change notification settings - Fork 206
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
xs={0} or md={0} for hide #57
Comments
Not sure about the props. In the past I've created E.g.
|
👍 This would be very useful |
@silvenon Thanks! In the meantime, I'm using a solution similar to @oliverbenns, but with a pure CSS |
@ivansglazunov i really liked your proposal so I wanted to share this snippet which wraps the original component adding support for something like: 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:/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;
}
} |
+1 Please merge! |
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? |
Should this issue be marked as closed in favour of #138? Just use className with any of these in your Column or Row: Fore more info: imevro/flexboxgrid2#4 |
Any update on this? Is this project still maintained? |
Would still be useful |
Very useful |
1 similar comment
Very useful |
if you guys are not using boostrap or other there is one solution using react useQueryMedia hook. i would be glad if we can handle those thing by grid itself like fxlayout. |
Why not make it easy to hide elements at certain screen sizes? Please please please :)
The text was updated successfully, but these errors were encountered: