# @clds/component-enhancer

> ---

Latest version **0.70.2** (published 2025-07-21) · 0 weekly downloads

## Install

```sh
npm install @clds/component-enhancer
pnpm add @clds/component-enhancer
yarn add @clds/component-enhancer
bun add @clds/component-enhancer
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.70.2 |
| Published | 2025-07-21 |
| First published | 2023-05-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 64.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Cloudinary |
| Maintainers | cloudinary-internal |

## Links

- npm: https://www.npmjs.com/package/@clds/component-enhancer
- Repository: https://github.com/cloudinary/design-system
- Homepage: https://github.com/cloudinary/design-system/tree/main/libs/foundations/component-enhancer#readme
- Issues: https://github.com/cloudinary/design-system/issues
- npm.io page: https://npm.io/package/@clds/component-enhancer

## Recent versions

- 0.70.2 (latest) — 2025-07-21
- 0.70.1 — 2025-07-08
- 0.70.0 — 2025-07-06
- 0.69.0 — 2025-06-26
- 0.68.0 — 2025-06-24
- 0.67.1 — 2025-06-12
- 0.67.0 — 2025-06-12
- 0.66.0 — 2025-06-09
- 0.65.0 — 2025-06-08
- 0.64.2 — 2025-06-05
- 0.64.1 — 2025-06-03
- 0.64.0 — 2025-06-03
- 0.63.1 — 2025-05-25
- 0.63.0 — 2025-05-06
- 0.62.4 — 2025-04-09
- … 110 more at https://npm.io/package/@clds/component-enhancer/versions

## README

## @clds/component-enhancer

---

[![npm version](https://img.shields.io/npm/v/@clds/component-enhancer)](https://www.npmjs.org/package/@clds/component-enhancer)

# @cld/component-enhancer

This package contains some utilities and HOC functions that will help you create themeable components

## asStyledComponent

In case you have a component which is not a styled-component and you want to allow overriding it's style using [interpolation][https://www.styled-components.com/docs/advanced#referring-to-other-components] you should use this wrapper.

```javascript
import React from 'react';
import styled from 'styled-components';
import { asStyledComponent } from '@cld/component-enhancer';

const StyledDiv = styled.div`
  color: red;
`;

const Component = React.forwardRef((props, ref) => <StyledDiv {...props} ref={ref} />);

export const CompAsStyledComponent = asStyledComponent(Component);
```

## Text wrapper

We created a dedicated styled component for wrapping text items so it will be easy to style an inner text elements in child components

### TextWrap

This is the styled component that wraps the text elements, you can use it to style nested text elements in children

```javascript
import styled from 'styled-components';
import { TextWrap } from '@cld/component-enhancer';

const StyledDiv = styled.div`
  color: red;
  ${TextWrap} {
    margin: 10px;
  }
`;

export default StyledDiv;
```

### useWrapTextChildren

You can use it to automatically wrap any text children which are not wrapped with an HTML element

```javascript
import React from 'react';
import { useWrapTextChildren } from '@cld/component-enhancer';

export default ({ children }) => {
  const parsedChildren = useWrapTextChildren(children);

  return <div>{parsedChildren}</div>;
};
```

### WrapTextChildren

In case you are not using React hooks you can use this component as a parent to the received children, this will wrap any text children which are not wrapped with an HTML element

```javascript
import React from 'react';
import { WrapTextChildren } from '@cld/component-enhancer';

class MyComponent extends React.Component {
  render() {
    return <WrapTextChildren>{props.children}</WrapTextChildren>;
  }
}
```

### withTextWrap

In case you want to wrap an existing component with [TextWrap][#textwrap] you can use this HOC

```javascript
import React from 'react';
import { withTextWrap } from '@cld/component-enhancer';
import Component from './Component';

const WrappedComponent = withTextWrap(Component);

export default WrappedComponent;
```

## Versioning

This library follows [Semantic Versioning](http://semver.org/).

## License

See [LICENSE](https://github.com/cloudinary/design-system/blob/main/LICENSE)

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