Make useClassyInk hook public (#26)

.changeset/six-schools-appear.md

@@ -0,0 +1,5 @@
+---
+"classy-ink": minor
+---
+
+Make the useClassyInk hook public for advanced use cases

README.md

@@ -307,18 +307,27 @@ All colors except `gray` also have a "bright" equivalent named `<color>-bright`
 
 ## Custom usage
 
-If you have some kind of custom use case, you can use the `compileClass` function directly. This function takes a class string and returns an object with the corresponding Ink props.
+If you have some kind of custom use case, you can use the `useClassyInk` hook or the `compileClass` function directly.
+
+Both take a class string and return an object with the corresponding Ink props. The hook wraps the function and adds memoization and caching logic on top.
+
+Unless there's a good reason to do otherwise, the hook is recommended over the function.
 
 ```tsx
+// note: incomplete example for illustration purposes
 import { compileClass } from "classy-ink";
 import { Box } from "ink";
 
+function MyCustomBox({ class: className, ...props }) {
+  return <Box {...useClassyInk(className)} {...props} />;
+}
+
+// or
+
 const inkProps = compileClass("border border-red");
 <Box {...inkProps} />;
 ```
 
-Note that this function does not have some optimizations that are built-in to the `Box` and `Text` components, like memoization and (optional) global cache. Use at your own risk.
-
 ## <a name='Contributing'></a>Contributing
 
 Install [`bun`](https://bun.sh/) and install dependencies with `bun i`.

src/components/Box.tsx

@@ -1,7 +1,7 @@
 import { Box as InkBox, type DOMElement } from "ink";
 import { type ComponentPropsWithoutRef, forwardRef } from "react";
 
-import { useClassyInk } from "./useClassyInk.js";
+import { useClassyInk } from "../lib/useClassyInk.js";
 
 export type BoxProps = ComponentPropsWithoutRef<typeof InkBox> & {
   class?: string;

src/components/Text.tsx

@@ -1,7 +1,7 @@
 import { Text as InkText } from "ink";
 import { type ComponentPropsWithoutRef } from "react";
 
-import { useClassyInk } from "./useClassyInk.js";
+import { useClassyInk } from "../lib/useClassyInk.js";
 
 export type TextProps = ComponentPropsWithoutRef<typeof InkText> & {
   class?: string;

src/index.ts

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
 export * from "./lib/compile-class.js";
+export * from "./lib/useClassyInk.js";

src/components/useClassyInk.ts → src/lib/useClassyInk.ts

@@ -1,8 +1,8 @@
 import { useMemo } from "react";
 
+import { useClassyInkContext } from "../components/context.js";
 import { compileClass } from "../index.js";
 import { type Props } from "../shared.js";
-import { useClassyInkContext } from "./context.js";
 
 export function useClassyInk(className?: string): Props {
   const { cache } = useClassyInkContext();