Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
evokit
Advanced tools
Readme
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>
FAQs
EvoKit — Tool for creating React UI Block
The npm package evokit receives a total of 745 weekly downloads. As such, evokit popularity was classified as not popular.
We found that evokit demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.