README
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 redundantclass
attribute; unlike packages likeclassnames
.
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
...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,
});
}