Gcs-flexbox NPM

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);