# merge-tw-props

> Utility for intelligently merging React component props using Tailwind.

Latest version **1.0.3** (published 2023-03-12) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install merge-tw-props
pnpm add merge-tw-props
yarn add merge-tw-props
bun add merge-tw-props
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-03-12 |
| First published | 2023-01-20 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14.0.0 |
| Dependencies | 2 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ed Jones |
| Maintainers | ed.software |
| Keywords | React, Tailwind, TailwindCSS, mergeProps |

## Links

- npm: https://www.npmjs.com/package/merge-tw-props
- Repository: https://github.com/ed-software/merge-tw-props
- Homepage: https://github.com/ed-software/merge-tw-props#readme
- Issues: https://github.com/ed-software/merge-tw-props/issues
- npm.io page: https://npm.io/package/merge-tw-props

## Dependencies (2)

- [tailwind-merge](https://npm.io/package/tailwind-merge.md) ^1.10.0
- [react-merge-refs](https://npm.io/package/react-merge-refs.md) ^2.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2023-03-12
- 1.0.2 — 2023-01-23
- 1.0.1 — 2023-01-23
- 1.0.0 — 2023-01-20

## README

# Merge TW Props

Utility for intelligently merging React component props using TailwindCSS classes. Merges as many props objects as you give it. Intelligently combines TailwindCSS classes, merges refs, chains event handlers and merges styles.

Built on top of [tailwind-merge](https://www.npmjs.com/package/tailwind-merge) and [react-merge-refs](https://www.npmjs.com/package/react-merge-refs).

## Authors

- [@ed-software](https://www.github.com/ed-software)

## Installation

Install with npm

```bash
npm i merge-tw-props
```

## Examples

```TSX
import mergeTWProps from "merge-tw-props";

export function Checkbox(props: JSX.IntrinsicElements["input"]) {
  return (
    <input
      {...mergeTWProps(props, {
        type: "checkbox",
        className:
          "h-4 w-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500 dark:bg-gray-900 dark:border-gray-700",
      })}
    />
  );
}
```

---
_Source: https://npm.io/package/merge-tw-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._