# class-name-prop

> A lightweight utility function to create a React className prop value for multiple class names.

Latest version **6.0.0** (published 2022-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install class-name-prop
pnpm add class-name-prop
yarn add class-name-prop
bun add class-name-prop
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.0 |
| Published | 2022-08-22 |
| First published | 2019-10-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | ^14.17.0 \|\| ^16.0.0 \|\| >= 18.0.0 |
| Dependencies | 0 |
| Unpacked size | 6.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Jayden Seric |
| Maintainers | jaydenseric |
| Keywords | react, class, name, className, prop |

## Links

- npm: https://www.npmjs.com/package/class-name-prop
- Repository: https://github.com/jaydenseric/class-name-prop
- Homepage: https://github.com/jaydenseric/class-name-prop#readme
- Issues: https://github.com/jaydenseric/class-name-prop/issues
- Funding: https://github.com/sponsors/jaydenseric
- npm.io page: https://npm.io/package/class-name-prop

## 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

- 6.0.0 (latest) — 2022-08-22
- 5.0.0 — 2022-01-14
- 4.0.0 — 2021-11-29
- 3.0.0 — 2021-05-02
- 2.0.0 — 2019-12-23
- 1.0.0 — 2019-10-24

## README

# class-name-prop

A lightweight utility function to create a [React](https://reactjs.org) `className` prop value for multiple class names.

- 📦 [Tiny bundle size](https://bundlephobia.com/package/class-name-prop), tested.
- ⚡️ Simple and fast API.
- 🧠 Returns `undefined` if there are no class names, to prevent rendering a redundant `class` attribute; unlike packages like [`classnames`](https://github.com/JedWatson/classnames).

## Installation

For [Node.js](https://nodejs.org), to install [`class-name-prop`](https://npm.im/class-name-prop) with [npm](https://npmjs.com/get-npm), run:

```sh
npm install class-name-prop
```

For [Deno](https://deno.land) and browsers, an example import map:

```json
{
  "imports": {
    "class-name-prop": "https://unpkg.com/class-name-prop@6.0.0/classNameProp.mjs"
  }
}
```

Then, import and use the function [`classNameProp`](./classNameProp.mjs).

## Examples

A [React](https://reactjs.org) component for a link that can be declared active, whilst supporting custom class names:

```js
import classNameProp from "class-name-prop";
import React from "react";

function Link({ className, active, ...props }) {
  return React.createElement("a", {
    className: classNameProp(className, active && "active"),
    ...props,
  });
}
```

## Requirements

Supported runtime environments:

- [Node.js](https://nodejs.org) versions `^14.17.0 || ^16.0.0 || >= 18.0.0`.
- [Deno](https://deno.land).
- Browsers matching the [Browserslist](https://browsersl.ist) query [`> 0.5%, not OperaMini all, not dead`](https://browsersl.ist/?q=%3E+0.5%25%2C+not+OperaMini+all%2C+not+dead).

Non [Deno](https://deno.land) projects must configure [TypeScript](https://typescriptlang.org) to use types from the ECMAScript modules that have a `// @ts-check` comment:

- [`compilerOptions.allowJs`](https://typescriptlang.org/tsconfig#allowJs) should be `true`.
- [`compilerOptions.maxNodeModuleJsDepth`](https://typescriptlang.org/tsconfig#maxNodeModuleJsDepth) should be reasonably large, e.g. `10`.
- [`compilerOptions.module`](https://typescriptlang.org/tsconfig#module) should be `"node16"` or `"nodenext"`.

## Exports

The [npm](https://npmjs.com) package [`class-name-prop`](https://npm.im/class-name-prop) features [optimal JavaScript module design](https://jaydenseric.com/blog/optimal-javascript-module-design). These ECMAScript modules are exported via the [`package.json`](./package.json) field [`exports`](https://nodejs.org/api/packages.html#exports):

- [`classNameProp.mjs`](./classNameProp.mjs)

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