glweems/styled-container

react container component using styled-components

path	date	title	subtitle	thumbnail	tags
styled-container	2019/03/19	Responsive Container Component with React and Styled-Components.	Bootstrap - like responsive fluid containers with styled-components, what more could you ask for.	tbn.jpg	react component container responsive styled-components

Setup

First things first you're going to need to install the styled-components node package.

npm install --save styled-components

or

yarn add styled-components

Now we are able to start creating our Theme object.

This will act like sass / scss / less variables and we will be able use them across all of our components.

// Theme.js
export const Theme = {
  colors: {
    dark: `#24292e`,
    light: `#EEEEEE`,
    primary: `#ff5851`
  },
  fontFamily: {
    header: 'Source Sans Pro',
    body: 'Roboto'
  },
  padding: '1rem 0.5rem'
};

export const Breakpoints = {
  mobileS: 320,
  mobileM: 375,
  mobileL: 425,
  tablet: 639,
  laptop: 1140,
  laptopL: 1440,
  desktop: 2560
};

export const MQ = {};
for (const key in ScreenSizes) {
  if (key)
    MQ[key] = styles =>
      `@media screen and (min-width: ${ScreenSizes[key]}px) { ${styles} }`;
}
export default Theme;

I like to create a Theme.js file in my src/ directory to store my Theme obj and Breakpoints object.

Usage

import Theme from 'theme';

const Container = styled.div`
  max-width: 100%;
  margin: 0 auto;
  padding: ${Theme.padding};
  ${MQ.laptopL(`max-width: 1140px`)}
  ${MQ.desktop(`max-width: 1440px`)};
`;