diff --git a/.changeset/six-schools-appear.md b/.changeset/six-schools-appear.md new file mode 100644 index 0000000..8fecc1e --- /dev/null +++ b/.changeset/six-schools-appear.md @@ -0,0 +1,5 @@ +--- +"classy-ink": minor +--- + +Make the useClassyInk hook public for advanced use cases diff --git a/README.md b/README.md index 2476975..84c2104 100644 --- a/README.md +++ b/README.md @@ -307,18 +307,27 @@ All colors except `gray` also have a "bright" equivalent named `-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 ; +} + +// or + const inkProps = compileClass("border border-red"); ; ``` -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. - ## Contributing Install [`bun`](https://bun.sh/) and install dependencies with `bun i`. diff --git a/src/components/Box.tsx b/src/components/Box.tsx index 58335be..48848cd 100644 --- a/src/components/Box.tsx +++ b/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 & { class?: string; diff --git a/src/components/Text.tsx b/src/components/Text.tsx index bf0979d..b51f684 100644 --- a/src/components/Text.tsx +++ b/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 & { class?: string; diff --git a/src/index.ts b/src/index.ts index adc24e1..747ca4e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,3 @@ export * from "./components/index.js"; export * from "./lib/compile-class.js"; +export * from "./lib/useClassyInk.js"; diff --git a/src/components/useClassyInk.ts b/src/lib/useClassyInk.ts similarity index 88% rename from src/components/useClassyInk.ts rename to src/lib/useClassyInk.ts index a6d78ee..58d8cef 100644 --- a/src/components/useClassyInk.ts +++ b/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();