0.1.4 • Published 2 years ago
@nawt/flex v0.1.4
@nawt/flex
A flex-grid Styled Component with the option to define the number of columns for your flex grid.
Install
# For NPM
npm install @nawt/flex
# For Yarn
yarn add @nawt/flex
# For PNPM
pnpm install @nawt/flex
API
<FlexRow \/>
Typically used in lieu with FlexCol, you can also reverse the order of items with the isReverse
prop with FlexRow.
Parameter | Default Value | Type | Description |
---|---|---|---|
isReverse | false | boolean | Defines whether to reverse item order |
import { FlexRow, FlexCol } from '@nawt/flex';
// Typical FlexRow usage
export const MyFlexGrid = () => {
return (
<FlexRow>
<FlexCol columnSize={[12, 6, 4]}>Column 1</FlexCol>
<FlexCol columnSize={[12, 6, 4]}>Column 2</FlexCol>
<FlexCol columnSize={[12, 6, 4]}>Column 3</FlexCol>
</FlexRow>
);
};
// FlexRow usage with 'isReverse'
export const MyReversedFlexGrid = () => {
return (
<FlexRow isReverse={true}>
<FlexCol columnSize={[12, 6, 4]}>Column 1</FlexCol>
<FlexCol columnSize={[12, 6, 4]}>Column 2</FlexCol>
<FlexCol columnSize={[12, 6, 4]}>Column 3</FlexCol>
</FlexRow>
);
};
<FlexCol \/>
Staple flex column component where you can define the following:
Parameter | Default Value | Type | Description |
---|---|---|---|
totalColumns | 12 | number | Defines the total number of columns as the basis for the calculation of 'columnSize' |
columnSize | n/a | number \| number[] | Defines the size of the column |
offset | n/a | number \| number[] | Defines the size of the column |
gutterWidth | n/a | number \| number[] | Defines the left/right padding of a column |
gap | n/a | number | Defines the gap value of a column |
Typical usage is as follows
import { FlexRow, FlexCol } from '@nawt/flex';
// Typical usage of FlexCol
export const MyFlexGrid = () => {
return (
<FlexRow>
<FlexCol columnSize={[12, 6, 4]}>Column 1</FlexCol>
<FlexCol columnSize={[12, 6, 4]}>Column 2</FlexCol>
<FlexCol columnSize={[12, 6, 4]}>Column 3</FlexCol>
</FlexRow>
);
};
// Usage of FlexColwith offset
export const MyOffsetFlexGrid = () => {
return (
<FlexRow>
<FlexCol columnSize={[1, 2, 3]} offset={[11, 10, 9]}>
Column 1
</FlexCol>
<FlexCol columnSize={[1, 2, 3]} offset={[11, 10, 9]}>
Column 2
</FlexCol>
<FlexCol columnSize={[1, 2, 3]} offset={[11, 10, 9]}>
Column 3
</FlexCol>
</FlexRow>
);
};
A custom total columns can be used as the basis for columnSize. This is to allow for a bit more flexibility to accommodate designs. Currently, it is required to create a wrapper for it for the sake of not repeating it everytime you need it.
import { FlexRow, FlexCol } from '@nawt/flex';
// Usage with totalColumns property, say a total of 16 columns as basis is required
export const Col = ({ children, totalColumns = 16 }) => {
return <FlexCol totalColumns={totalColumns}>{children}</FlexCol>;
};
// Then Col can be used as per usual
export const MyFlexGrid = () => {
return (
<FlexRow>
<Col columnSize={[16, 8, 4]}>Column 1</Col>
<Col columnSize={[16, 8, 4]}>Column 2</Col>
<Col columnSize={[16, 8, 4]}>Column 3</Col>
</FlexRow>
);
};