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

Exports

These ECMAScript modules are published to npm and exported via the package.json exports field:

• classNameProp.mjs

classNameProp.mjs

Export default

Function classNameProp — Creates a React className prop value for multiple class names.

Parameters

1. ...classNames: unknown — 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.

Example 1

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,
  });
}

Changelog

5.0.0

Major

• Implemented TypeScript types via JSDoc comments.

Patch

• Updated dev dependencies.
• Check TypeScript types via a new package types script.
• Removed the jsdoc-md dev dependency and the related package scripts, replacing the readme “API” section with a manually written “Exports” section.
• Updated a Bundlephobia link URL in the readme.
• Added a license.md MIT License file.