Comments (5)
Hi @PetroPavlenko, thanks, that is a better implementation, I didn't focus too closely on the types in my solution.
from styled-bootstrap-grid.
Yep, same issue here with the Down
props, it's all off by one. I want this component to only be visible at lg and above.
<Col lg={6} hiddenLgDown>
If I set to hiddenMdDown
, it hides it at md, but md - lg is visible.
If I set to hiddenLgDown
, then it hides it between md - lg, but also hides it at lg.
The fix would break backwards compatibility so you might need to add new properties instead of changing the new ones, something like hiddenBelowMd
or hiddenAboveLg
.
from styled-bootstrap-grid.
@julijatrescenko In the meantime, try this styled Col component I used, it will still use your breakpoints:
export type ColProps = {
/**
* Hide only > the specified breakpoint, instead of >=.
*/
hiddenAbove?: string;
/**
* Hide only < the specified breakpoint, instead of <=.
*/
hiddenBelow?: string;
};
const Col = styled(OriginalCol)`
@media (max-width: ${(props: ColProps) =>
props.hiddenBelow && `${getBreakpoint(props, props.hiddenBelow) - 1}px`}) {
display: none;
}
@media (min-width: ${(props: ColProps) =>
props.hiddenAbove && `${getBreakpoint(props, props.hiddenAbove) + 1}px`}) {
display: none;
}
`;
export { Col };
const getBreakpoints = (props): { [key: string]: number } => ({
...((props.theme &&
props.theme.styledBootstrapGrid &&
props.theme.styledBootstrapGrid.breakpoints) ||
{}),
});
function getBreakpoint(props, bp: string): number {
return getBreakpoints(props)[bp];
}
You can use it like:
<Col xl={3} hiddenBelow="xl" />
from styled-bootstrap-grid.
I think you can use slightly better typed
import styled from "styled-components";
import { Col as OriginalCol, Breakpoints } from "styled-bootstrap-grid";
type BreakpointsKeys = keyof typeof MediaLabels
const getBreakpoint = (props: any, bp: BreakpointsKeys): number =>
props?.theme?.styledBootstrapGrid?.breakpoints[bp] || 0;
export const RespCol = styled(OriginalCol)<{ hiddenAbove?: BreakpointsKeys}>`
${props => props.hiddenAbove && `
@media (min-width: ${`${getBreakpoint(props, props.hiddenAbove) + 1}px`}) {
display: none;
}
`}
`;
from styled-bootstrap-grid.
Hi @dragma Looks like in 3.1 doesn't contain PR #57 that help with this. So I cannot pull it from npm. Can you bump version with fix ?
from styled-bootstrap-grid.
Related Issues (20)
- React 17.0.x compatibility
- Theme Provider has a delay generating css
- Support Styled Components V6 HOT 1
- Column Width issue HOT 19
- Container Fluid max-width HOT 2
- Media min and max HOT 2
- GridThemeProvider needs children prop HOT 1
- npm install error v3.0.3 HOT 8
- Customize the amount of columns HOT 2
- Breakpoint sensitive paddings HOT 2
- Flex direction support
- Git submodule HOT 1
- Usage of !important for components styling causes error on AMP pages. HOT 10
- Col offset breaks other breakpoints
- Feature request: lessThan media type HOT 2
- Adding extra breakpoints trough gridThemeProvider HOT 1
- Changelog for breaking changes?
- Request: Number of columns prop for Row HOT 1
- Custom css appends a class over current css
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from styled-bootstrap-grid.