rc-class

1.0.2 • Public • Published

rc-class

handle multiple react classnames

usage

 
import rcClass from "rc-class"
 
let cn = new rcClass.default('event-billing-information');
cn(['abc', { xyz: { reduce: '-information' } }, { kog: { reduce: 1,use:true } }],'open')
//result:{ className: 'event-billing-information-abc event-billing-xyz event-billing-kog open' }
//reduce key can reduce prefix from last,if reduce type is no,will prefix.split('-') and remove number item from last
//use:true is default and optional, kog:{use:condition->true/false}
 
 
//basic type,config prefix,can be empty
let cn=rcClass('bot');
 
...
 
<div {...cn('content')}></div> //result <div className="bot-content"></div>
 
 
cn(['abc', { xyz: { reduce: '-information' } }, { kog: { reduce: 3 } }])
//result { className: 'event-billing-information-abc event-billing-xyz event-billing-kog' }
 
<div {...cn('content','introduce')}></div> //result <div className="bot-content introduce"></div>
 
<div {...cn(['content','core'],['introduce'])}></div> //result <div className="bot-content bot-core introduce"></div>
 
<div {...cn({'content':true},{'introduce':true})}></div> //result <div className="bot-content introduce"></div>
 
//get className
cn().className //result bot
 
cn('content').className //result bot-content
cn(null,'content').className //result content
 
...
 

Readme

Keywords

Package Sidebar

Install

npm i rc-class

Weekly Downloads

0

Version

1.0.2

License

MIT

Unpacked Size

11.8 kB

Total Files

6

Last publish

Collaborators

  • zoomnode