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

To install with npm, run:

npm install class-name-prop

API

function classNameProp

Creates a React className prop value for multiple class names.

Parameter	Type	Description
classNames	…any	Class name strings to merge; only non empty strings are added to the final string.

Returns: string | undefined — A className prop value; either a string of 1 or more space separated class names or undefined to prevent rendering an empty class attribute.

Examples

How to import.

import classNameProp from "class-name-prop";

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

function Link({ className, active, ...props }) {
  return (
    <a className={classNameProp(className, active && "active")} {...props} />
  );
}

Changelog

4.0.0

Major

• Updated Node.js support to ^12.22.0 || ^14.17.0 || >= 16.0.0.
• Updated browser support to > 0.5%, not OperaMini all, not IE > 0, not dead.
• Updated dev dependencies, some of which require newer Node.js versions than previously supported.
• Removed ./package from the package exports field; the full package.json filename must be used in a require path.
• The API is now ESM in .mjs files instead of CJS in .js files, accessible via import but not require.
• More modern JavaScript syntax.

Minor

• Added ./classNameProp.mjs to the package exports field.

Patch

• Also run GitHub Actions CI with Node.js v17.
• Add Node.js version ranges to the package browserslist field.
• Updated the package description field.
• Tweaked the package main field.
• Simplified package scripts.
• Configured Prettier option singleQuote to the default, false.
• Use the JSDoc type any instead of * for better TypeScript support.
• Use a new assertBundleSize function to assert module bundle size in tests:
  • Failure message contains details about the bundle size and how much the limit was exceeded.
  • Errors when the surplus is greater than 25% of the limit, suggesting the limit should be reduced.
  • Resolves the minified bundle and its gzipped size for debugging in tests.
• Removed npm-debug.log from the .gitignore file as npm v4.2.0+ doesn’t create it in the current working directory.
• Documentation updates.