1.0.6 • Published 2 years ago
prefix2classnames v1.0.6
prefix2classnames
A simple utility for conditionally joining classNames together
pnpm install prefix2classnames
Use width webpack
import classNames from 'prefix2classnames';
classNames('red', 'blue'); // => 'red blue'
Usage
The classNames
function takes any number of arguments which can be a string ,array, object.
The argument 'red'
equivalent to { red: true }
or ['red']
. If the value associated with a given key is falsy, that key won't be included in the output.Note that the really valid values are strings.
classNames('red', 'blue'); // => 'red blue'
classNames('red', { blue: true }); // => 'red blue'
classNames({ yellow: false }); // => ''
classNames({ red: true }, { blue: true }); // => 'red blue'
classNames({ red: true, blue: true }); // => 'red blue'
// other falsy values and type is not string are just ignored
classNames(null, false, 'red', undefined, 0, 1, { blue: null }, '', /a/g); // => 'red'
Arrays will be recursively flattened as per the rules above:
const arr = ['red', null, { blue: true, yellow: false }];
classNames('pink', arr); // => 'pink red blue'
Alternate bind
version (for css-modules)
If you are using css-modules, or a similar approach to abstract class "names" and the real className
values that are actually output to the DOM, you may want to use the bind
variant.
import classNames from 'prefix2classnames';
var styles = {
red: '1',
blue: '2',
yellow: '3',
};
var cx = classNames.bind(styles);
var className = cx({ red, blue, yellow: true }); // => "1 2 3"
prefix
You can use global prefix and local prefix through some configurations
global prefix
import classNames from 'prefix2classnames';
var cx = classNames.bind({
'-': 'global_',
});
var className = cx({ red, blue, yellow: true }); // => "global_red global_blue global_yellow"
// css module
var styles = {
global_red: '1',
global_blue: '2',
global_yellow: '3',
};
var cx = classNames.bind({
'-': 'global_',
styles,
});
var className = cx({ red, blue, yellow: true }); // => "1 2 3"
local prefix
import classNames from 'prefix2classnames';
var cx = classNames.bind({
'-': 'global_',
});
var className = cx({ '-': 'local_', red, blue, yellow: true }); // => "global_local_red global_local_blue global_local_yellow"
// css module
var styles = {
global_local_red: '1',
global_local_blue: '2',
global_local_yellow: '3',
};
var cx = classNames.bind({
'-': 'global_',
styles,
});
var className = cx({ '-': 'local_', red, blue, yellow: true }); // => "1 2 3"
Use '.'
To match prefix
import classNames from 'prefix2classnames';
var cx = classNames.bind({
'-': 'global_',
});
var className = cx({ '-': 'local_','.', red, blue, yellow: true }); // => "global_local_ global_local_red global_local_blue global_local_yellow"