# @rendr-view/with-clxn

> A React higher-order-component (HOC) that manages mapping and merging an object of utility classes (clxn) to child elements, specifically designed for Tailwind CSS workflows.

Latest version **1.0.2** (published 2026-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rendr-view/with-clxn
pnpm add @rendr-view/with-clxn
yarn add @rendr-view/with-clxn
bun add @rendr-view/with-clxn
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2026-02-12 |
| First published | 2022-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20.11.0 |
| Dependencies | 1 |
| Unpacked size | 77.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | fiveid |

## Links

- npm: https://www.npmjs.com/package/@rendr-view/with-clxn
- Repository: https://github.com/fiveid/rendr-view
- Homepage: https://github.com/fiveid/rendr-view#readme
- Issues: https://github.com/fiveid/rendr-view/issues
- npm.io page: https://npm.io/package/@rendr-view/with-clxn

## Dependencies (1)

- [clsx](https://npm.io/package/clsx.md) ^1.1.1

## Recent versions

- 1.0.2 (latest) — 2026-02-12
- 1.0.1 — 2026-02-12
- 1.0.0 — 2026-02-12
- 0.0.1 — 2025-03-15
- 0.0.1-alpha.3 — 2022-09-26
- 0.0.1-alpha.2 — 2022-09-26
- 0.0.1-alpha.1 — 2022-07-15
- 0.0.1-alpha.0 — 2022-07-02

## README

# @rendr-view/with-clxn

A React higher-order-component (HOC) that manages mapping and merging an object of utility classes (clxn) to child elements, specifically designed for Tailwind CSS workflows.

## 1. Metadata

- **Package Name:** `@rendr-view/with-clxn`
- **Description:** A utility for managing multi-element class objects in React components.
- **Category:** Logic / HOC

## 2. API Design

### Exports

- `withClxn` (Default): The Higher-Order Component.
- `clxn`: The underlying utility for merging class objects.

### HOC API

```ts
const EnhancedComponent = withClxn(BaseComponent, defaultClasses);
```

The enhanced component receives a `clx` prop which can be a static object or a function returning an object.

## 3. Implementation Details

- **Dependencies:** `react`
- **Flexibility:** Supports conditional class merging and overrides at the instance level.

## 4. Usage Example

```tsx
import withClxn from "@rendr-view/with-clxn";

const BaseBox = ({ clx }) => (
  <div className={clx.container}>
    <h1 className={clx.title}>Hello</h1>
  </div>
);

const Box = withClxn(BaseBox, {
  container: "p-4 bg-gray-100",
  title: "text-xl font-bold"
});

// Override classes for specific instances:
<Box clx={{ container: "bg-blue-100" }} />
```

---
_Source: https://npm.io/package/@rendr-view/with-clxn · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._