Package Exports

evokit
evokit/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (evokit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>