simple-merge-class-names 5.0.4 → 5.0.6
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.
- package/README.md +25 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@ A straightforward utility for merging CSS class names in `React + Tailwind` and
|
|
|
4
4
|
|
|
5
5
|
## Table of Contents
|
|
6
6
|
|
|
7
|
-
- [
|
|
7
|
+
- [We Stand with Palestine](#we-stand-with-palestine)
|
|
8
8
|
- [Production Considerations](#production-considerations)
|
|
9
9
|
- [Installation](#installation)
|
|
10
10
|
- [Install Prettier With VSCode (Most Recommended)](#install-prettier-with-vscode-most-recommended)
|
|
@@ -24,15 +24,13 @@ A straightforward utility for merging CSS class names in `React + Tailwind` and
|
|
|
24
24
|
- [Where This Package Excels](#where-this-package-excels)
|
|
25
25
|
- [License](#license)
|
|
26
26
|
|
|
27
|
-
##
|
|
27
|
+
## We Stand with Palestine <img src="https://raw.githubusercontent.com/new-AF/simple-merge-class-names/main/.github/images/ps.svg" alt="Flag of Palestine" height="11" />
|
|
28
28
|
|
|
29
|
-
|
|
29
|
+
- [Donate](https://gazafunds.com/)
|
|
30
30
|
|
|
31
|
-
[
|
|
31
|
+
- [Boycott Brands Supporting Genocide](https://www.uplift.ie/bds/)
|
|
32
32
|
|
|
33
|
-
[
|
|
34
|
-
|
|
35
|
-
[Legal Action](https://www.hindrajabfoundation.org/perpetrators)
|
|
33
|
+
- [Legal Action](https://www.hindrajabfoundation.org/perpetrators)
|
|
36
34
|
|
|
37
35
|
## Production Considerations
|
|
38
36
|
|
|
@@ -228,6 +226,26 @@ const MyComponent = () => {
|
|
|
228
226
|
|
|
229
227
|
## Using `mergeClassNamesDebugger` And The Built-in Browser Debugger To Find And Fix Warnings
|
|
230
228
|
|
|
229
|
+
```jsx
|
|
230
|
+
import { mergeClassNamesDebugger } from "simple-merge-class-names";
|
|
231
|
+
|
|
232
|
+
const MyComponent = () => {
|
|
233
|
+
return (
|
|
234
|
+
<div
|
|
235
|
+
className={mergeClassNamesDebugger(
|
|
236
|
+
"app",
|
|
237
|
+
condition ? "min-h-dvh" : false,
|
|
238
|
+
"grid",
|
|
239
|
+
"grid-rows-[auto_1fr_auto]",
|
|
240
|
+
"outline"
|
|
241
|
+
)}
|
|
242
|
+
>
|
|
243
|
+
Hello, world!
|
|
244
|
+
</div>
|
|
245
|
+
);
|
|
246
|
+
};
|
|
247
|
+
```
|
|
248
|
+
|
|
231
249
|
`mergeClassNamesDebugger` is a drop-in replacement for `mergeClassNames` but with the added _benefit_ that it will activate the built-in **_debugger_** inside browsers like _FireFox_, _Chrome_, _Safari_ and even _VS Code_ if configured properly.
|
|
232
250
|
|
|
233
251
|
This built-in JavaScript feature gained wide-spread support from major browsers around 2012, so you are getting this feature for free with minimal effort, all you have to do are 2 things:
|