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.