class-name-prop

class-name-prop

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

• 📦 < 70 B, Size Limit tested.
• 💪 Supports ancient browsers and Node.js.
• ⚡️ 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 from 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

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

const classNameProp = require('class-name-prop')
const PropTypes = require('prop-types')
const React = require('react')

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

Link.propTypes = {
  className: PropTypes.string,
  active: PropTypes.bool
}

Changelog

2.0.0

Major

• Updated Node.js support from v8+ to v10+.
• Updated dev dependencies.
• Use coverage-node for test code coverage.

Minor

• Setup GitHub Sponsors funding:
  • Added .github/funding.yml to display a sponsor button in GitHub.
  • Added a package.json funding field to enable npm CLI funding features.

Patch

• Removed the now redundant eslint-plugin-import-order-alphabetical dev dependency.
• Stop using husky and lint-staged.
• Use strict mode for scripts.
• Test Node.js v13 in CI.