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

1.0.0

Initial release.