simple-merge-class-names 5.0.5 → 5.0.7
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 +21 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -80,7 +80,7 @@ const MyComponent = () => {
|
|
|
80
80
|
};
|
|
81
81
|
```
|
|
82
82
|
|
|
83
|
-
Or for debugging purposes to fix
|
|
83
|
+
Or for [debugging purposes to fix console warnings](#using-mergeclassnamesdebugger-and-the-built-in-browser-debugger-to-find-and-fix-warnings):
|
|
84
84
|
|
|
85
85
|
- Open the _Browser's Developer Tools_ and
|
|
86
86
|
- Use `mergeClassNamesDebugger`
|
|
@@ -226,6 +226,26 @@ const MyComponent = () => {
|
|
|
226
226
|
|
|
227
227
|
## Using `mergeClassNamesDebugger` And The Built-in Browser Debugger To Find And Fix Warnings
|
|
228
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
|
+
|
|
229
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.
|
|
230
250
|
|
|
231
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:
|