Class-name-prop NPM

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