sindresorhus / Class Names
Licence: mit
Conditionally join CSS class names together - Especially useful with React
Stars: ✭ 281
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Class Names
dynamodb-parallel-scan
Scan large DynamoDB tables faster with parallelism
Stars: ✭ 21 (-92.53%)
Mutual labels: npm-package
stimulus-rails-nested-form
A Stimulus controller to create new fields on the fly to populate your Rails relationship.
Stars: ✭ 54 (-80.78%)
Mutual labels: npm-package
puppeteer-fetchbot
Library and Shell command that provides a simple JSON-API to perform human like interactions and data extractions on any website. Built on top of puppeteer.
Stars: ✭ 60 (-78.65%)
Mutual labels: npm-package
ngx-interactive-paycard
Interactive Angular payment card library.
Stars: ✭ 71 (-74.73%)
Mutual labels: npm-package
Input Range Scss
Styling Cross-Browser Compatible Range Inputs with Sass
Stars: ✭ 272 (-3.2%)
Mutual labels: npm-package
netty-finder
☎️ This script checks a Nigerian telephone number and detects which network it belongs to.
Stars: ✭ 44 (-84.34%)
Mutual labels: npm-package
shipyard
A lightweight, CSS framework for Rails & Jekyll applications
Stars: ✭ 16 (-94.31%)
Mutual labels: npm-package
request-extra
⚡️ Extremely stable HTTP request module built on top of libcurl with retries, timeouts and callback API
Stars: ✭ 14 (-95.02%)
Mutual labels: npm-package
ngx-smart-loader
Smart loader handler to manage loaders everywhere in Angular apps.
Stars: ✭ 28 (-90.04%)
Mutual labels: npm-package
josk
🏃🤖 Scheduler and manager for jobs and tasks in node.js on multi-server and clusters setup
Stars: ✭ 27 (-90.39%)
Mutual labels: npm-package
wakatime-client
🖥 JavaScript Client for https://wakatime.com/developers
Stars: ✭ 29 (-89.68%)
Mutual labels: npm-package
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (-8.9%)
Mutual labels: npm-package
notifyme
react-notification-timeline is a react based component helps in managing the notification in time-based manner.
Stars: ✭ 94 (-66.55%)
Mutual labels: npm-package
node-split-file
🌱 NodeJS Module to split and merge files for several purposes like transporting over unstable networks.
Stars: ✭ 33 (-88.26%)
Mutual labels: npm-package
Electron Store
Simple data persistence for your Electron app or module - Save and load user preferences, app state, cache, etc
Stars: ✭ 3,316 (+1080.07%)
Mutual labels: npm-package
vue-sfc-cli
🔨A powerful tool for developing vue single-file component
Stars: ✭ 137 (-51.25%)
Mutual labels: npm-package
class-names
Conditionally join CSS class names together - Especially useful with React
Install
$ npm install @sindresorhus/class-names
Usage
const classNames = require('@sindresorhus/class-names');
classNames('unicorn', 'rainbow');
//=> 'unicorn rainbow'
classNames({awesome: true, foo: false}, 'unicorn', {rainbow: false});
//=> 'awesome unicorn'
classNames('unicorn', null, undefined, 0, 1, {foo: null});
//=> 'unicorn'
const buttonType = 'main';
classNames({[`button-${buttonType}`]: true});
//=> 'button-main'
const classNames = require('@sindresorhus/class-names');
const Button = props => {
console.log(props);
/*
{
type: 'success',
small: true
}
*/
const buttonClass = classNames(
'button',
{
[`button-${props.type}`]: props.type,
'button-block': props.block,
'button-small': props.small
}
);
console.log(buttonClass);
//=> 'button button-success button-small'
return <button className={buttonClass}>…</button>;
};
API
classNames(…input)
Conditionally join CSS class names together.
input
Type: string | object
Accepts a combination of strings and objects. When an object, only object keys with truthy values are included. Anything else is ignored.
FAQ
classnames
?
How is it different from - Dedupes by default.
- Doesn't coerce numbers to strings.
- Doesn't support array input. Just use the spread operator.
Related
- react-extras - Useful components and utilities for working with React
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].