Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (quickflex) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React QuickFlex

QuickFlex is a lightweight, customizable Flexbox layout component for React built with TypeScript and Emotion. It simplifies building responsive layouts by providing a flexible, declarative API for all Flexbox properties.

Features

✅ Declarative React API for Flexbox layouts
✅ Full control over flex properties: justify, align, direction, wrap, gap
✅ Written in TypeScript with full type safety
✅ Lightweight and fast, optimized for performance
✅ Easily extendable via className or inline style
✅ No dependency on CSS frameworks

Installation

You can install the package via npm:

npm i quickflex

Usage

The QuickFlex component is a wrapper around a div element with flex properties passed as props. Here’s an example of how to use it in a React project:

import React from 'react';
import { QuickFlex } from 'quickflex';

const App = () => {
  return (
    <QuickFlex
      justify="center"
      align="center"
      direction="row"
      wrap="wrap"
      gap="16px"
      style={{ height: '100vh' }}
    >
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </QuickFlex>
  );
};

export default App;

Example Explanation

The QuickFlex component allows you to set the justify, align, direction, wrap, and gap properties via props.
Additional styles can be passed using the style or className prop.

Props

Here are the available props for the QuickFlex component:

Prop	Type	Options	Default	Description
justify	string	`"flex-start"` `"flex-end"` `"center"` `"space-between"` `"space-around"` `"space-evenly"`	`"flex-start"`	Refers: Justify-content
align	string	`"stretch"` `"flex-start"` `"flex-end"` `"center"` `"baseline"`	`"stretch"`	Refers: align-items
direction	string	`"row"` `"row-reverse"` `"column"` `"column-reverse"`	`"row"`	Defines the direction in which the container's children are placed.
wrap	string	`"nowrap"` `"wrap"` `"wrap-reverse"`	`"nowrap"`	Controls whether the children should wrap onto multiple lines.
gap	string	-	`"0"`	Specifies the gap between the child elements. (e.g., gap="16px").
className	string	-	`undefined`	Optional class name to add custom classes.
style	React.CSSProperties	-	`undefined`	Optional inline styles for custom layout

Customization

The QuickFlex component is highly customizable through props. If you need more flexibility, you can also pass additional styles or classes:

Example with Custom Class

import React from 'react';
import { QuickFlex } from 'quickflex';

const App = () => {
  return (
    <QuickFlex className="custom-flex">
      <div>Custom styled item</div>
    </QuickFlex>
  );
};

// custom.css
.custom-flex {
  background-color: lightgray;
  padding: 20px;
  border-radius: 8px;
}

Example with Inline Styles

<QuickFlex
  justify="center"
  align="center"
  style={{ backgroundColor: "lightblue", padding: "20px" }}
>
  <div>Inline styled item</div>
</QuickFlex>

TypeScript Support

quickflex is written in TypeScript, providing full type safety and intellisense for all props.

import React from "react";
import { QuickFlex } from "quickflex";

const App: React.FC = () => {
  return (
    <QuickFlex justify="center" align="center" gap="10px">
      <div>Item 1</div>
      <div>Item 2</div>
    </QuickFlex>
  );
};

Development

Feel free to contribute or modify the package, just clone the repository and install dependencies:

git clone https://github.com/Khurshida-Meem/QuickFlex.git
cd QuickFlex
npm install

You can build the project with:

npm run build

Contributing

You are welcome for any contributions and ideas! Feel free to open issues or submit pull requests. Before contributing, make sure to run the tests and ensure that everything works as expected.

Fork the repository
Create a new branch (git checkout -b feature/your-feature)
Make your changes and commit them (git commit -am 'Add new feature')
Push the branch (git push origin feature/your-feature)
Create a pull request

Repository

You can find the source code at: GitHub Repo.

License

QuickFlex is MIT licensed.