2.0.2 • Published 5 years ago
@ricardocanelas/styled-responsive v2.0.2
💅 Styled-Responsive
Simple responsive grid system layout for React. Also you can inject the breakpoints in any component.
Live example: https://codesandbox.io/s/n56nvvkm90
Warning
This component was created just for fun. You can find better components in: awesome-styled-components repository.
Not require styled-component
BUT all example below are using that library.
👉🏻 Install Package
yarn add @ricardocanelas/styled-responsive
👉🏻 How to Use
1 - Add breakpoints
import { ThemeProvider } from 'styled-components'
const theme = {
breakpoints: {
xs: 0,
sm: '48em',
md: '64em',
lg: '75em',
},
}
class App extends Component {
render() {
return(
<ThemeProvider theme={theme}>
<Grid>
<Box sm='50%' lg-bg='yellow'>
</Grid>
<ThemeProvider>
)
}
)
2 - Creating the Grid Component
using the media
method
import styled from 'styled-components'
import { media } from '@ricardocanelas/styled-responsive'
export const Grid = styled.div`
position: relative;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
${media('xs')`max-width: 100%; padding: 8px;`}
${media('sm')`max-width: 49em;`}
${media('md')`max-width: 65em;`}
${media('lg')`max-width: 76em;`}
`
3 - Customizing any component
using the responsive
method
import styled from 'styled-components'
import { responsive } from '@ricardocanelas/styled-responsive'
export const Box = styled.div`
display: block;
box-sizing: border-box;
${responsive('width')}
${responsive('background', 'bg')}
`
👉🏻 API
media(breakpoint)(css)
Example:
${media('xs')`max-width: 100%; padding: 8px;`}
Will be:
@media (min-width: 0) {
max-width: 100%;
padding: 8px;
}
responsive(property, sufix)
Example:
${responsive('width')}
Will be:
@media (min-width: 0) {
width: ${props => props.xs};
}
@media (min-width: 48em) {
width: ${props => props.sm};
}
@media (min-width: 64em) {
width: ${props => props.md};
}
@media (min-width: 75em) {
width: ${props => props.lg};
}
Using
<Mycomp sm='50%' />
Another Example:
${responsive('background', 'fundo')}
Will be:
@media (min-width: 0) {
background: ${props => props['xs-fundo']};
}
@media (min-width: 48em) {
background: ${props => props['sm-fundo']};
}
@media (min-width: 64em) {
background: ${props => props['md-fundo']};
}
@media (min-width: 75em) {
background: ${props => props['lg-fundo']};
}
Using
<Mycomp sm-fundo='#ccc' />
👉🏻 Code Examples
import React, { Component } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { responsive, media } from '@ricardocanelas/styled-responsive';
const theme = {
breakpoints: {
xs: 0,
sm: '48em',
md: '64em',
lg: '75em',
},
}
const Grid = styled.div`
position: relative;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
width: 100%;
${media('xs')`max-width: 100%;`}
${media('sm')`max-width: 49em;`}
${media('md')`max-width: 65em;`}
${media('lg')`max-width: 76em;`}
`
const GridItem = styled.div`
box-sizing: border-box;
${responsive('width')}
${responsive('background-color', 'bg')}
${media('lg')`
padding: 10px;
box-sizing: border-box;
`}
`
const Flex = styled.div`
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
`
class App extends Component {
render() {
return (
<ThemeProvider theme={theme}>
<>
<Grid>
<Flex>
<GridItem
xs='100%' sm='50%' md='33.3%' lg='10%'
md-bg='blue' lg-bg='red'>
First Item
</GridItem>
<GridItem
xs='100%' sm='50%' md='33.3%' lg='90%'
md-bg='blue' lg-bg='lightcoral'>
Second item
</GridItem>
</Flex>
</Grid>
</>
</ThemeProvider>
);
}
}
export default App;
License
MIT © Ricardo Canelas