class-name-prop

class-name-prop

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

• 📦 Tiny bundle size, tested.
• 💪 Supports ancient browsers.
• ⚡️ Simple and fast API.
• 🧠 Returns undefined if there are no classes, to prevent rendering a redundant class attribute; unlike packages like classnames.

Setup

To install with npm, run:

npm install class-name-prop

API

Table of contents

• function classNameProp

function classNameProp

Creates a React className prop value for multiple classes.

Parameter	Type	Description
classes	…*	A parameter for each class; only non empty strings are added to the final string.

Returns: string | undefined — A className prop value; either a string of classes or undefined to prevent rendering an empty class attribute.

Examples

How to import.

import classNameProp from 'class-name-prop';

How to require.

const classNameProp = require('class-name-prop');

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

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

Changelog

3.0.0

Major

• Updated Node.js support to ^12.20 || >= 14.13.
• Updated dev dependencies, some of which require newer Node.js versions than were previously supported.
• Added a package exports field.
• Added a package sideEffects field.
• The tests are now ESM in an .mjs file instead of CJS in a .js file.

Patch

• Updated GitHub Actions CI config:
  • Also run on pull request.
  • Also run tests with Node.js v15, v16.
  • Updated actions/checkout to v2.
  • Updated actions/setup-node to v2.
  • Use the simpler npm install-test command.
  • Don’t specify the CI environment variable as it’s set by default.
• Test the bundle size manually using esbuild and gzip-size, removing size-limit related dev dependencies, config, and scripts.
• Updated the package scripts:
  • Simpler JSDoc related scripts now that jsdoc-md v10 automatically generates a Prettier formatted readme.
  • Added a test:jsdoc script that checks the readme API docs are up to date with the source JSDoc.
  • Simpler test:prettier script arguments.
• Configured Prettier option semi to the default, true.
• Updated the EditorConfig.
• Updated code examples.
• Readme tweaks.
• Link React in docs.