class-name-prop

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

Usage no npm install needed!

<script type="module">
  import classNameProp from 'https://cdn.skypack.dev/class-name-prop';
</script>

README

class-name-prop

npm version CI status

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

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