Feature Request: Get current breakpoint about styled-bootstrap-grid

[dragma]

This is not possible for you to think that way.
Bootstrap layout css is made so you can hide or show or resize things depending on your browser resolution.
styled-component is a library that mostly generates css code, and inject it in the dom.

Maybe you should rethink your component so it adapts its design to the given breakpoints.

Example :

import React from 'react';
import styled from 'styled-components';
import { media } from 'styled-bootstrap-grid';

const Comp = styled.div`
  display: none;
  ${media.md` // larger than 'md' breakpoint
    display: initial;
  `}
  ${media.lg` // larger than 'lg' breakpoint
    display: none;
  `}
`;

const SomeComponent = props => (
  <div>
    <Comp>Hide if not md</Comp>
  </div>
);

export default SomeComponent;

[dragma]

Media is already exposed !

Try this !

import { media } from 'styled-bootstrap-grid';
import styled from 'styled-components';

const MyComponent = styled.div`
  ${media.xl`
    display: none;
  `}
`;

export default MyComponent;

[checkonetwo]

I mean something like in my Page.js:

{ currentBreakpoint === 'md' ? <SomeComponent /> : null }

main thing is not hiding component with css
main thing is do not render something with some breakpoints

[checkonetwo]

Thank you anyway! I will try to do it by my self
Thread could be close

[kopax]

I would recommend an alternative, using bootstrap-styled:

• For building package: http://bootstrap-styled.github.io/bootstrap-styled
• Bootstrap 4 styled implementation: http://bootstrap-styled.github.io/v4

There is a similar implementation of withWidth as material-ui:

import withWidth from 'bootstrap-styled/lib/withWidth';

export default withWidth({ logging: true })(MyComponent);

It should also work with this package, as long as you have theme['$grid-breakpoints´] in your theme.