class-name-prop

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

Changelog

6.0.0

Major

• Updated Node.js support to ^14.17.0 || ^16.0.0 || >= 18.0.0.
• Updated dev dependencies, some of which require newer Node.js versions than previously supported.
• Removed the package main field.
• Use the node: URL scheme for Node.js builtin module imports in tests.

Patch

• Simplified dev dependencies and config for ESLint.
• Updated jsconfig.json:
  • Set compilerOptions.maxNodeModuleJsDepth to 10.
  • Set compilerOptions.module to nodenext.
• Updated GitHub Actions CI config:
  • Run tests with Node.js v14, v16, v18.
  • Updated actions/checkout to v3.
  • Updated actions/setup-node to v3.
• Removed the now redundant not IE > 0 from the Browserslist query.
• Revamped the readme:
  • Removed the badges.
  • Removed the detailed API docs. The JSDoc comments and TypeScript types in the exported modules are now the primary documentation.
  • Added a “Requirements” section.
  • Added information about Deno, import maps, TypeScript config and optimal JavaScript module design.