simple-merge-class-names 1.0.3 → 1.0.5

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 (2) hide show
  1. package/README.md +8 -10
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -16,15 +16,15 @@ yarn add simple-merge-class-names
16
16
  npm install simple-merge-class-names
17
17
  ```
18
18
 
19
- ## Install `Prettier` with VSCode (Most Recommended)
19
+ ## Install `Prettier` With VSCode (Most Recommended)
20
20
 
21
- Install Prettier for VS Code for most optimal developer experience: [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
21
+ [https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
22
22
 
23
23
  Or install an equivalent auto code formatter for your IDE.
24
24
 
25
25
  ## Usage
26
26
 
27
- `mergeClassNames(...args)` is the single exported function provided by the package.
27
+ Import `mergeClassNames(...args)` from the package, and use it in your JSX or JavaScript code.
28
28
 
29
29
  ```jsx
30
30
  import { mergeClassNames } from "simple-merge-class-names";
@@ -46,7 +46,7 @@ function MyComponent() {
46
46
  }
47
47
  ```
48
48
 
49
- Using individual strings for each class name can be tedious (see [Workflow to minimize typing strain](#workflow-to-minimize-typing-strain)), however it significantly enhances code readability and Developer Experience (DX). This is in contrast to hard-to-read strings like:
49
+ While using separate strings for each class name can be tedious (see [Workflow To Minimize Typing Strain](#workflow-to-minimize-typing-strain)), it however significantly enhances Code Readability and Developer Experience (DX). This is in contrast to hard-to-read strings like:
50
50
 
51
51
  ```jsx
52
52
  function MyComponent() {
@@ -58,7 +58,7 @@ function MyComponent() {
58
58
  }
59
59
  ```
60
60
 
61
- ## Workflow to minimize typing strain:
61
+ ## Workflow To Minimize Typing Strain
62
62
 
63
63
  ![Screen recording of optimal DX in action: using this package with Prettier as it neatly arranges each class name on a new line](https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/Reduce%20typing%20strain.gif)
64
64
 
@@ -68,13 +68,13 @@ function MyComponent() {
68
68
  - Replaces single quotes with double quotes.
69
69
  - Neatly arranges each class name on a new line.
70
70
 
71
- ## Why the mismatch between exported Function, and Package name?
71
+ ## Why the Mismatch Between Exported Function and Package Name?
72
72
 
73
73
  I wanted to name the package as `mergeClassNames` to reflect the single exported function, but the NPM Package Registry does not allow capital letters, only lower case and dash characters.
74
74
 
75
75
  In addition there was already a package named `merge-class-names` but it is no longer maintained (and the developer recommends `clsx` instead).
76
76
 
77
- ## Where this package excels
77
+ ## Where This Package Excels
78
78
 
79
79
  While similar packages exist (`clsx`) with better features and potentially improved performance, `simple-merge-class-names` focuses on being very straightforward and easy to reason about, as defined in its source code.
80
80
 
@@ -119,9 +119,7 @@ export const mergeClassNames = (...args) => {
119
119
 
120
120
  ## Argument Handling
121
121
 
122
- `mergeClassNames` accepts multiple arguments but filters out `null`, `undefined`, and empty strings (`""`), and the remaining values are either strings or are _implicitly converted_ to strings by the JavaScript engine.
123
-
124
- Finally the end string values are merged and separated by spaces.
122
+ `mergeClassNames` accepts multiple arguments but filters out `null`, `undefined`, and empty strings (`""`). Remaining values are either strings or are _implicitly converted_ to strings by the JavaScript engine, then joined with spaces to produce the final class name string.
125
123
 
126
124
  ## Production Considerations
127
125
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "simple-merge-class-names",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "Example usage: <div className = {mergeClassNames('flex', 'flex-col')}/>",
5
5
  "main": "mergeClassNames.js",
6
6
  "exports": "./mergeClassNames.js",