reclassify

Reclassify is a small library for React developers that changes how CSS class names can be written in JSX code. In React, when you want to apply CSS classes to an element conditionally, the standard approach requires importing a helper function like clsx or classnames and calling it every time. Reclassify eliminates that step by letting you pass arrays or objects directly to the className property on standard HTML elements, without any helper call.

For example, instead of writing clsx("btn", "btn-primary", { "btn-disabled": isLoading }) wrapped around a call, you can write the same array or object directly as the className value and it works. The library handles the conversion behind the scenes by replacing React's default JSX processing with its own version.

Setup is a one-line change in the project's configuration file. After that, the new syntax works everywhere in the application without touching individual files. TypeScript support is included, meaning the type checker understands and accepts the new array and object syntax rather than flagging it as an error.

For developers who need additional behavior, such as resolving conflicting Tailwind CSS classes, the library has a configure function that lets you swap in a custom class-building function. This function runs globally, so you call it once at application startup and the whole app uses it.

The library also exports a cx function directly, which can be used in custom components that want the same array and object handling without relying on the JSX runtime hook.

The project is focused on reducing boilerplate in React codebases that already use conditional class names frequently. It does not change how custom components work, only standard HTML elements like div, button, and similar tags.