From 06b0cbf8badd09ab90ebc9cc33f420867fb6da62 Mon Sep 17 00:00:00 2001
From: Cecilia Sanare <admin@cecilias.me>
Date: Mon, 8 Jan 2024 22:05:21 -0600
Subject: [PATCH] docs(readme): added useClassNames

---
 README.md | 24 ++++++++++--------------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 352d189..18204fb 100644
--- a/README.md
+++ b/README.md
@@ -13,37 +13,33 @@
 
 Collection of react utilities curated by the Rainbow Cafe~
 
-## `useCachedState` and `useReadOnlyCachedState`
+## `useCachedState` / `useReadOnlyCachedState` / `useClassNames`
 
 ```tsx
-import {
-  useCachedState, 
-  useReadOnlyCachedState,
-} from '@rain-cafe/react-utils';
+import { useCachedState, useReadOnlyCachedState, useClassNames, classNames } from '@rain-cafe/react-utils';
 import classnames from 'classnames';
 import * as styles from './MySimpleInput.module.scss';
 
 export type MySimpleInputProps = {
   className?: string;
   value?: string;
-}
+};
 
 export function MySimpleInput({ className: externalClassName, value: externalValue }: MySimpleInputProps) {
   // This is a utility for keeping external properties in-sync with the internal state
   const [value, setValue] = useCachedState(() => externalValue, [externalValue]);
 
   // This is a utility for computing properties only when changes occur
+
+  // Longer Version
   const className = useReadOnlyCachedState(() => {
-    return classnames(styles.input, externalClassName);
+    return classNames(styles.input, externalClassName);
   }, [externalClassName]);
 
-  return (
-    <input 
-      className={className}
-      value={value} 
-      onChange={(event) => setValue(event.target.value)} 
-    />
-  );
+  // Short-hand Version
+  const className = useClassNames([styles.input, externalClassName]);
+
+  return <input className={className} value={value} onChange={(event) => setValue(event.target.value)} />;
 }
 ```