quickflex 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/LICENSE.md +19 -0
  2. package/README.md +158 -0
  3. package/package.json +8 -3
package/LICENSE.md ADDED
@@ -0,0 +1,19 @@
1
+ Copyright (c) Khurshida Jahan Meem
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy
4
+ of this software and associated documentation files (the "Software"), to deal
5
+ in the Software without restriction, including without limitation the rights
6
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
+ copies of the Software, and to permit persons to whom the Software is
8
+ furnished to do so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all
11
+ copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19
+ SOFTWARE.
package/README.md CHANGED
@@ -0,0 +1,158 @@
1
+ # QuickFlex
2
+
3
+ `quickflex` is a lightweight, customizable Flexbox component built with React and Emotion. It simplifies the usage of Flexbox in your React applications by providing an easy-to-use component with flexible options.
4
+
5
+ ## Features
6
+
7
+ - Simple, declarative API to manage Flexbox layouts
8
+ - Full control over flex properties (`justify`, `align`, `direction`, `wrap`, `gap`)
9
+ - Written in TypeScript, with full type safety
10
+ - Lightweight and fast, optimized for performance
11
+ - Easily extendable with `className` or inline `style` props
12
+ - Not dependent on any CSS libraries or frameworks
13
+
14
+ ## Installation
15
+
16
+ You can install the package via npm:
17
+
18
+ ```bash
19
+ npm install quickflex
20
+ ```
21
+
22
+ ## Usage
23
+
24
+ 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:
25
+
26
+ <!-- prettier-ignore -->
27
+ ```js
28
+ import React from 'react';
29
+ import { QuickFlex } from 'quickflex';
30
+
31
+ const App = () => {
32
+ return (
33
+ <QuickFlex
34
+ justify="center"
35
+ align="center"
36
+ direction="row"
37
+ wrap="wrap"
38
+ gap="16px"
39
+ style={{ height: '100vh' }}
40
+ >
41
+ <div>Item 1</div>
42
+ <div>Item 2</div>
43
+ <div>Item 3</div>
44
+ </QuickFlex>
45
+ );
46
+ };
47
+
48
+ export default App;
49
+ ```
50
+
51
+ ## Example Explanation
52
+
53
+ - The QuickFlex component allows you to set the justify, align, direction, wrap, and gap properties via props.
54
+ - Additional styles can be passed using the style or className prop.
55
+
56
+ ## Props
57
+
58
+ Here are the available props for the QuickFlex component:
59
+
60
+ | Prop | Type | Options | Default | Description |
61
+ | --------- | ------------------- | ------------------------------------------------------------------------------------------------------------- | -------------- | ------------------------------------------------------------------------ |
62
+ | justify | string | <br>`"flex-start"`<br>`"flex-end"`<br>`"center"`<br>`"space-between"`<br>`"space-around"`<br>`"space-evenly"` | `"flex-start"` | Refers: Justify-content |
63
+ | align | string | <br>`"stretch"`<br>`"flex-start"`<br>`"flex-end"`<br>`"center"`<br>`"baseline"` | `"stretch"` | Refers: align-items |
64
+ | direction | string | <br>`"row"`<br>`"row-reverse"`<br>`"column"`<br>`"column-reverse"` | `"row"` | Defines the direction in which <br> the container's children are placed. |
65
+ | wrap | string | <br>`"nowrap"`<br>`"wrap"`<br>`"wrap-reverse"` | `"nowrap"` | Controls whether the children should <br> wrap onto multiple lines. |
66
+ | gap | string | - | `"0"` | Specifies the gap between the child elements. <br> (e.g., gap="16px"). |
67
+ | className | string | - | `undefined` | Optional class name to add custom classes. |
68
+ | style | React.CSSProperties | - | `undefined` | Optional inline styles for custom layout |
69
+
70
+ ## Customization
71
+
72
+ The QuickFlex component is highly customizable through props. If you need more flexibility, you can also pass additional styles or classes:
73
+
74
+ ### Example with Custom Class
75
+
76
+ ```js
77
+ import React from 'react';
78
+ import { QuickFlex } from 'quickflex';
79
+
80
+ const App = () => {
81
+ return (
82
+ <QuickFlex className="custom-flex">
83
+ <div>Custom styled item</div>
84
+ </QuickFlex>
85
+ );
86
+ };
87
+
88
+ // custom.css
89
+ .custom-flex {
90
+ background-color: lightgray;
91
+ padding: 20px;
92
+ border-radius: 8px;
93
+ }
94
+ ```
95
+
96
+ ### Example with Inline Styles
97
+
98
+ ```js
99
+ <QuickFlex
100
+ justify="center"
101
+ align="center"
102
+ style={{ backgroundColor: "lightblue", padding: "20px" }}
103
+ >
104
+ <div>Inline styled item</div>
105
+ </QuickFlex>
106
+ ```
107
+
108
+ ## TypeScript Support
109
+
110
+ quickflex is written in TypeScript, providing full type safety and intellisense for all props.
111
+
112
+ ```js
113
+ import React from "react";
114
+ import { QuickFlex } from "quickflex";
115
+
116
+ const App: React.FC = () => {
117
+ return (
118
+ <QuickFlex justify="center" align="center" gap="10px">
119
+ <div>Item 1</div>
120
+ <div>Item 2</div>
121
+ </QuickFlex>
122
+ );
123
+ };
124
+ ```
125
+
126
+ ## Development
127
+
128
+ Feel free to contribute or modify the package, just clone the repository and install dependencies:
129
+
130
+ ```bash
131
+ git clone https://github.com/Khurshida-Meem/QuickFlex.git
132
+ cd QuickFlex
133
+ npm install
134
+ ```
135
+
136
+ You can build the project with:
137
+
138
+ ```bash
139
+ npm run build
140
+ ```
141
+
142
+ ## Contributing
143
+
144
+ 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.
145
+
146
+ - Fork the repository
147
+ - Create a new branch (git checkout -b feature/your-feature)
148
+ - Make your changes and commit them (git commit -am 'Add new feature')
149
+ - Push the branch (git push origin feature/your-feature)
150
+ - Create a pull request
151
+
152
+ ## Repository
153
+
154
+ You can find the source code at: [GitHub Repo](https://github.com/Khurshida-Meem/QuickFlex).
155
+
156
+ ## License
157
+
158
+ QuickFlex is [MIT licensed](./LICENSE).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "quickflex",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "main": "index.js",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",
@@ -8,7 +8,7 @@
8
8
  },
9
9
  "keywords": [],
10
10
  "author": "Khurshida Jahan Meem",
11
- "license": "ISC",
11
+ "license": "MIT",
12
12
  "description": "",
13
13
  "dependencies": {
14
14
  "@emotion/react": "^11.13.3",
@@ -30,5 +30,10 @@
30
30
  "type": "git",
31
31
  "url": "https://github.com/Khurshida-Meem/QuickFlex.git"
32
32
  },
33
- "homepage": "https://github.com/Khurshida-Meem/QuickFlex"
33
+ "homepage": "https://github.com/Khurshida-Meem/QuickFlex",
34
+ "files": [
35
+ "dist",
36
+ "README.md",
37
+ "LICENSE.md"
38
+ ]
34
39
  }