Update readme with versus

Author: Andrii Kirmas

README.md

@@ -1,6 +1,6 @@
 # react-classnaming
 
-Easy applied function to use with [CSS modules](https://github.com/css-modules/css-modules) and do not get lost in CSS classes
+Easy applied function to use optionally with [CSS modules](https://github.com/css-modules/css-modules) and do not get lost in CSS classes
 
 ![keywords](https://img.shields.io/github/package-json/keywords/askirmas/react-classnaming) ![test@ci](https://github.com/askirmas/react-classnaming/workflows/CI/badge.svg?branch=main) ![coverage](https://img.shields.io/codecov/c/github/askirmas/react-classnaming) ![version](https://img.shields.io/npm/v/react-classnaming) ![license](https://img.shields.io/npm/l/react-classnaming)
 
@@ -48,3 +48,51 @@ import classNames from "./modules.scss"
 
 ReactDOM.render( <Root classNames={names(classNames))}/> )
 ```
+
+## vs [classnames](https://github.com/JedWatson/classnames#readme)
+
+See [src/versus-classnames.test.ts](./src/versus-classnames.test.ts)
+
+### No css-modules, just simulation
+
+```tsx
+import classnames from "classnames"
+<div className={classnames("class1", "class2")} />
+<div id={classnames("class1", "class2")} />
+
+/** VERSUS */
+
+import css from "./some.css"
+import {classNamesCheck, classNamingBasic} from "react-classnaming"
+import type {ClassNames} from "react-classnaming"
+
+const { class1,
+  //@expect-ts-error
+  whatever
+} = classNamesCheck<"class1"|"class2">(css)
+
+const props: ClassNames<"class2"> = {"classNames": css}
+
+const {class2} = props.classNames
+
+<div {...classNamingBasic({class1, class2})} />
+<div id={classNamingBasic<string>({class1, class2})} />
+```
+
+### CSS module
+
+```tsx
+import module_css from "./some.module.css" // {"class1": "hash1", "class2": "hash2"}
+
+import classnames_bind from "classnames/bind"
+const cx = classnames_bind.bind(module_css)
+// No error on redundant CSS-class
+<div className={cx("class1", "class3")} />
+
+/** VERSUS */
+
+import {classNamingCtx} from "react-classnaming"
+const classNaming = classNamingCtx({classNames: module_css})
+//@ts-expect-error Argument of type '"class3"' is not assignable to parameter
+<div {...classNaming("class1", "class3")} />
+```

__recipes__/cra/package-lock.json

@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const css: Record<string, string|undefined>
+  export = css
+}

global.d.ts

@@ -1,35 +1,50 @@
-import {classNamesCheck, classNamingBasic, classNamingCtx} from "."
+/// <reference path="../global.d.ts" />
+
+import css from "./some.css"
+import type {ClassNames} from "."
+import {
+  classNamesCheck,
+  classNamingBasic,
+  classNamingCtx
+} from "."
 
 import classnames_default from "classnames"
 import classnames_bind from "classnames/bind"
 
-const cssModule = {
+const module_css = {
   "class1": "hash1",
   "class2": "hash2"
 }
-, importRawCss = {}
-
 
 it("usage interface", () => {
-  const {class1} = classNamesCheck(importRawCss)
+  const { class1,
+    //@ts-expect-error Property 'class3' does not exist
+    whatever
+  } = classNamesCheck<"class1"|"class2">(css)
+  
+  const props: ClassNames<"class2"> = {"classNames": css}
+  
+  const {classNames: {class2}} = props
 
   expect(
-    classNamingBasic({class1})
+    classNamingBasic({class1, class2})
   ).toStrictEqual({
     //@ts-expect-error `classnames` has no possibility for type hints
-    className:  classnames_default<"class2">("class1")
+    className:  classnames_default<"whatever">("class1", "class2")
   })
+
+  expect(class2 ?? whatever).toBe(undefined)
 })
 
 it("css module", () => expect({
-  className: classnames_bind.bind(cssModule)(
+  className: classnames_bind.bind(module_css)(
     // No error on redundant CSS-class
     "class1", "class3"
   )
 }).toStrictEqual(
-  classNamingCtx({classNames: cssModule})(
+  classNamingCtx({classNames: module_css})(
     "class1",
-    //@ts-expect-error
+    //@ts-expect-error Argument of type '"class3"' is not assignable to parameter
     "class3"
   )
 ))