gcs-flexbox

gcs-flexbox is a React and styled-components based Flexbox layout component with customizable colors. It allows you to create responsive and flexible layouts with ease, while also providing a way to customize the colors used in the components.

Installation

Install the package using npm:

npm install gcs-flexbox

Usage

Importing Components

Import the Row and Column components from the package:

import React from 'react';
import { Row, Column, mergeColors } from 'gcs-flexbox';
import defaultColors from 'gcs-flexbox/constants/colors';

Using the Components

Use the Row and Column components to create a flexible layout. You can also customize the colors by using the mergeColors function.

import React from 'react';
import { Row, Column, mergeColors } from 'gcs-flexbox';

const userColors = {
  "primary-500": "#ff5733",
  "secondary-500": "#33c4ff",
  ...
};

const colors = mergeColors(userColors);

const App = () => (
  <Row backgroundColor="primary-500">
    <Column size={6} difference={2}>
      Content here
    </Column>
  </Row>
);

export default App;

Props

Row Component

Prop	Type	Description
wrap	TWrap or { [K in TMedia]?: TWrap }	Flex wrap property
direction	TDirection or { [K in TMedia]?: TDirection }	Flex direction property
content	TContent or { [K in TMedia]?: TContent }	Justify content property
align_items	TItems or { [K in TMedia]?: TItems }	Align items property
align_content	TItems or { [K in TMedia]?: TItems }	Align content property
gap	number or { [K in TMedia]?: number }	Gap property
row_gap	number or { [K in TMedia]?: number }	Row gap property
column_gap	number or { [K in TMedia]?: number }	Column gap property
width	string	Width of the row
minWidth	string	Minimum width of the row
height	string	Height of the row
backgroundColor	TColors	Background color of the row
padding	string	Padding of the row
borderRadius	string	Border radius of the row

Column Component

Prop	Type	Description
wrap	TWrap or { [K in TMedia]?: TWrap }	Flex wrap property
direction	TDirection or { [K in TMedia]?: TDirection }	Flex direction property
content	TContent or { [K in TMedia]?: TContent }	Justify content property
align_items	TItems or { [K in TMedia]?: TItems }	Align items property
align_content	TItems or { [K in TMedia]?: TItems }	Align content property
gap	number or { [K in TMedia]?: number }	Gap property
row_gap	number or { [K in TMedia]?: number }	Row gap property
column_gap	number or { [K in TMedia]?: number }	Column gap property
size	number or { [K in TMedia]?: number }	Size of the column
difference	number or { [K in TMedia]?: number }	Difference in size for responsive adjustments

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 'gcs-flexbox';

const userColors = {
  "primary-500": "#ff5733",
  "secondary-500": "#33c4ff",
  ...
};

const colors = mergeColors(userColors);

License

This project is licensed under the ISC License.