Allows you to divide the user interface into independent blocks and think about them separately. EvoKit blocks can be declared with createBlock
.
Peer dependencies react, prop-types
npm install evokit --save
?> createBlock(tagName, blockName, blockMods, preset)
See example create block
tagName
- string, html tagblockName
- string, block nameblockMods
- array of string, block modifier key listpreset
- object, default value:{ b: 'ek-', m: '_', v: '_', css: null }
More about preset:
Key | Type | Default value | Description |
---|---|---|---|
b |
string |
ek- |
block class name prefix: {b}blockName => ek-blockName |
m |
string |
_ |
block modifier name separator: blockName{m}modName => blockName_modName |
v |
string |
_ |
block modifier value separator: modName{v}modVal => modName_modVal |
css |
object |
null |
object CSS Modules classes |
import { createBlock } from 'evokit';
const Footer = createBlock('div', 'footer', ['padding']);
<Footer /> // <div class="ek-footer"></div>
<Footer footer-padding='xxl' /> // <div class="ek-footer ek-footer_padding_xxl"></div>
// ADDITIONAL PROPS:
<Footer footer-as='span' /> // <span class="ek-footer ek-footer_padding_xxl"></span>
<Footer footer-preset={{ css: cssModules }} /> // CSS Modules
CSS Modules with custom class prefix mp-
:
/* css-modules.css */
.mp-footer {}
.mp-footer_padding_xs {}
import { createBlock } from 'evokit';
import styles from 'css-modules.css';
const Footer = createBlock('div', 'footer', ['padding'], {
b: 'mp-',
css: styles,
});
<Footer /> // <div class="mp-footer"></div>
<Footer footer-padding='xs' /> // <div class="mp-footer mp-footer_padding_xs"></div>
?> withProps(Block, props)
Return block with default props
See example with props
import { createBlock, withProps } from 'evokit';
// import styles from 'css-modules.css';
const Footer = createBlock('div', 'footer', ['padding']);
const FooterXXL = withProps(Footer, {
'footer-as': 'table',
'footer-padding': 'xxl',
});
// const FooterCssModules = withProps(Footer, {
// 'footer-preset': {
// css: styles,
// },
// });
<Footer /> // <div class="ek-footer"></div>
<FooterXXL /> // <table class="ek-footer ek-footer_padding_xxl"></table>
<FooterXXL footer-as='span' footer-padding='m' /> // <span class="ek-footer ek-footer_padding_m"></span>