flex-box-packg-lib
v1.0.0
Published
It's a package for flex-box styles
Downloads
57
Maintainers
Readme
Flex-box-packg-lib
Why should we install this package?
By installing this package, you can easily use responsive layout components - Row and Column.
Installation
npm install flex-box-packg-lib
The purpose of the package
Simplify the creation of uniform layout structures throughout your application.
Use in Row and Column components
import {Row,Column,Container} from "flex-box-packg-lib"
const ExampleLayout: React.FC = () => {
return (
<>
<Container>
<Row
wrap={{ sm: "nowrap", md: "wrap" }}
direction="row"
content="space-between"
align_items="center"
gap={{ sm: 10, md: 20 }}
width="100%"
>
<Column
size={{ sm: 6, md: 4 }}
difference={{ sm: 10, md: 20 }}
wrap="wrap"
direction="column"
>
{/*Content*/}
<div>Column 1</div>
</Column>
<Column
size={{ sm: 6, md: 8 }}
difference={{ sm: 10, md: 20 }}
wrap="wrap"
direction="column"
>
{/* Content*/}
<div>Column 2</div>
</Column>
</Row>
</Container>
</>
);
};
Custom Colors
You can customize the colors used in the components by providing your own color values using the mergeColors
function. This function takes an object with your custom colors and merges them with the default colors.
import { mergeColors } from 'flex-box-packg-lib';
const userColors = {
"primary-500": "#ff5733",
"secondary-500": "#33c4ff",
...
};
const colors = mergeColors(userColors);
License
This project is licensed under the MIT License.