Many a projects often have content that centered in the page and doesn’t expand as the screen width expands. As such, having to do it for every page or for every project is tedious and I wanted to use it across projects. Plus, since you get the source files anyways, you can edit it to suit your use case.
In the future, I’ll extend the component to allow inclusion of more scenarios through props rather than having to modify the source itself.
This module has one default component and 3 other helper components:
CenteredComponentContainerRowColCenteredComponentimport CenteredComponent from '..modules/CenteredComponent
Then in your component,
<CenteredComponent>
{/* Your render code goes here */}
{children}
</CenteredComponent>
This component can be used for the use case I mentioned just above. It accepts two props apart from the children and both are optional:
| Property | Required | Optional | Type | Description |
|---|---|---|---|---|
| centerContent | true |
boolean |
This is like justify center. All the children will arranged in the center of the container | |
| removeTopOffset | true |
boolean |
By default, this HOC has a top offset of 48px to separate children from whatever might be above this component. |
Container, Row, ColThese components allow you to create a grid system in vanilla JS. It based on react-grid-system which is a wonderful nifty little library. The original components are simple and need no further simplification. The reason for exposing the components from here is that I have used setConfiguration utility from the library and modified the gutters and containerWidths to align it with what our BC designers use. You can read more about the components on the library’s website.
import { Container, Row, Col } from '../modules/CenteredComponent'
Then, in your component, you can do something like this:
<Container>
<Row>
<Col xs={3} md={5}>
{/* Something in here */}
</Col>
</Row>
<Container>
Again, refer to the library’s website to see more examples and demos.