class-name-prop

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

• 📦 Tiny bundle size, tested.
• ⚡️ Simple and fast API.
• 🧠 Returns undefined if there are no class names, to prevent rendering a redundant class attribute; unlike packages like classnames.

Installation

For Node.js, to install class-name-prop with npm, run:

npm install class-name-prop

For Deno and browsers, an example import map:

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

Then, import and use the function classNameProp.

Examples

A React component for a link that can be declared active, whilst supporting custom class names:

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 versions ^14.17.0 || ^16.0.0 || >= 18.0.0.
• Deno.
• Browsers matching the Browserslist query > 0.5%, not OperaMini all, not dead.

Non Deno projects must configure TypeScript to use types from the ECMAScript modules that have a // @ts-check comment:

• compilerOptions.allowJs should be true.
• compilerOptions.maxNodeModuleJsDepth should be reasonably large, e.g. 10.
• compilerOptions.module should be "node16" or "nodenext".

Exports

The npm package class-name-prop features optimal JavaScript module design. These ECMAScript modules are exported via the package.json field exports:

• classNameProp.mjs