Plumeriaprops
API reference for the props method
The css.props() function returns style object as hashed classes together while filtering out falsy values like undefined, false, or null. It is useful when conditionally combining styles.
Example
import { css } from '@plumeria/core';
const styles = css.create({
one: {
display: 'flex',
justifyContent: 'space-between',
},
two: {
fontSize: '14px',
color: '#606060',
},
});<div className={css.props(styles.one, styles.two)}>
{/* ... */}
</div>Usage Patterns
Conditional styles
Only truthy values are preserved.
const isActive = true;
const className = css.props(
styles.one,
isActive && styles.two
);With ternary
const className = css.props(
isDark ? styles.dark : styles.light,
isHovered && styles.hovered
);Return value
Returns a single hashes string of space-separated styleObject, ignoring falsy inputs:
css.props(styles.one, false, undefined, styles.two);See Also
Good to know
Since falsy values are filtered out, you can use logical and, ternary operators, etc. in argument expressions.