evokit

3.2.5 • Public • Published

EvoKit

Allows you to divide the user interface into independent blocks and think about them separately. EvoKit blocks can be declared with createBlock.


Usage

Peer dependencies react, prop-types

npm install evokit --save

Create block

?> createBlock(tagName, blockName, blockMods, preset)

See example create block

  • tagName - string, html tag
  • blockName - string, block name
  • blockMods - array of string, block modifier key list
  • preset - 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>

With props

?> 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>

Package Sidebar

Install

npm i evokit

Homepage

evokit.net/

Weekly Downloads

1,036

Version

3.2.5

License

MIT

Unpacked Size

80.5 kB

Total Files

7

Last publish

Collaborators

  • docccdev