Skip to content

Instantly share code, notes, and snippets.

@tomshaw
Created November 7, 2021 02:31
Show Gist options
  • Save tomshaw/4c99ccdbde55affc620afd0730b9ccaf to your computer and use it in GitHub Desktop.
Save tomshaw/4c99ccdbde55affc620afd0730b9ccaf to your computer and use it in GitHub Desktop.
React Bootstrap 5 Container.
import React from "react"
import PropTypes from "prop-types"
import classNames from "classnames"
import "./Container.scss"
const Container = ({ sm, md, lg, xl, xxl, fluid, ...props }) => {
let styles = {
"container-sm": sm,
"container-md": md,
"container-lg": lg,
"container-xl": xl,
"container-xxl": xxl,
"container-fluid": fluid,
}
return (
<div className={classNames({ "container": Object.values(styles).every(item => item === false) }, styles)} {...props} />
);
};
Container.propTypes = {
sm: PropTypes.bool,
md: PropTypes.bool,
lg: PropTypes.bool,
xl: PropTypes.bool,
xxl: PropTypes.bool,
fluid: PropTypes.bool
}
Container.defaultProps = {
sm: false,
md: false,
lg: false,
xl: false,
xxl: false,
fluid: false
}
export default Container
@tomshaw
Copy link
Author

tomshaw commented Nov 7, 2021

If no size is specified defaults to a default container style.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment