# @react-ck/react-utils

Latest version **2.0.6** (published 2025-09-29) · 0 weekly downloads

## Install

```sh
npm install @react-ck/react-utils
pnpm add @react-ck/react-utils
yarn add @react-ck/react-utils
bun add @react-ck/react-utils
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.6 |
| Published | 2025-09-29 |
| First published | 2024-01-02 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | abelflopes |

## Links

- npm: https://www.npmjs.com/package/@react-ck/react-utils
- Repository: https://github.com/abelflopes/react-ck
- Homepage: https://github.com/abelflopes/react-ck/tree/master/packages/utils/react-utils#readme
- npm.io page: https://npm.io/package/@react-ck/react-utils

## Dependencies (1)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1

## Recent versions

- 2.0.6 (latest) — 2025-09-29
- 2.0.5 — 2025-09-08
- 2.0.4 — 2025-07-31
- 2.0.3 — 2025-07-28
- 2.0.2 — 2025-07-25
- 2.0.1 — 2025-07-19
- 2.0.0 — 2025-07-19
- 1.6.1 — 2025-07-18
- 1.6.0 — 2025-07-09
- 1.5.0 — 2025-06-07
- 1.4.0 — 2024-12-19
- 1.3.7 — 2024-10-09
- 1.3.6 — 2024-07-10
- 1.3.5 — 2024-07-10
- 1.3.4 — 2024-07-09
- … 19 more at https://npm.io/package/@react-ck/react-utils/versions

## README

# React CK | Utils Library

> :warning: **WARNING**: This component library is being updated frequently and it's currently unstable due to being in it's early stages, we advice you to use only in production environments only after version **2.0.0**.

### Installation 

To integrate the this library into your React apps, you can install it using npm or yarn: `npm i --save @react-ck/react-utils` or `yarn add @react-ck/react-utils`.

## Utilities

### Polimorphy

Component polimorphy allows consumer to choose which HTML tags and attributes will be rendered from a specific component.

### Usage Examples

### Implementation

```diff
import React, { isValidElement, useEffect, useMemo } from "react";
import styles from "./styles/index.module.scss";
import classNames from "classnames";
- import { getDisplayName } from "@react-ck/react-utils";
+ import {
+  getDisplayName,
+  PolymorphicComponent,
+  type ConsumerPolymorphicProps,
+  type HTMLTag,
+ } from "@react-ck/react-utils";

- export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+ export interface ButtonProps<T extends HTMLTag>
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    ConsumerPolymorphicProps<T> {
  skin?: "primary" | "secondary" | "ghost" | "negative";
  size?: "s" | "m" | "l";
  icon?: React.ReactNode;
}

- export const Button = ({
+ export const Button = <T extends HTMLTag>({
+  as,
  skin = "primary",
  size = "m",
  icon,
  children,
  className,
  ...otherProps
- }: Readonly<ButtonProps>): React.ReactElement => {
+ }: Readonly<ButtonProps<T>>): React.ReactElement => {
  const isIconOnly = useMemo(
    () => icon !== undefined && React.Children.count(children) === 0,
    [children, icon],
  );

  return (
-    <button
-      className={classNames(
-        styles.root,
-        styles[skin],
-        styles[`size-${size}`],
-        {
-          [`${styles["icon-only"]}`]: isIconOnly,
-        },
-        className,
-      )}
-      {...otherProps}>
+    <PolymorphicComponent
+      as={as}
+      fallback={["button", otherProps]}
+      commonProps={{
+        className: classNames(
+          styles.root,
+          styles[skin],
+          styles[`size-${size}`],
+          {
+            [`${styles["icon-only"]}`]: isIconOnly,
+          },
+          className,
+        ),
+      }}>
      {icon && !isIconOnly ? <span className={styles.icon}>{icon}</span> : null}
      {children}
      {isIconOnly ? icon : null}
-     </button>
+    </PolymorphicComponent>
  );
};
```


<!-- storybook-ignore -->

---

Check the documentation website - [react-ck.js.org](https://react-ck.js.org).

---
_Source: https://npm.io/package/@react-ck/react-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._