addAtom
You can create your own Atomic Props with addAtom
.
#
Basic Usageimport { addAtom } from '@fower/core'
addAtom('textHeading', { fontSize: 28, fontWeight: 600, lineHeight: 1.5,})
You register a Atomic Props call textHeading
, it generates css rule:
font-size: 28px;font-weight: 600;line-height: 1.5;
now you can use it:
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO
#
Advancedimport { addAtom } from '@fower/core'
addAtom(/heading(sm|md|lg)/i, (atom) => { const size = atom.propKey.replace('heading', '').toLowerCase() switch (size) { case 'sm': atom.style = { fontSize: 16 } break case 'md': atom.style = { fontSize: 24 } break case 'lg': atom.style = { fontSize: 32 } break default: break } return atom})
You register some Atomic Props matched with /heading(sm|md|lg)/i
, now you can use them:
SyntaxError: Unexpected token (1:8) 1 : return () ^
LIVE DEMO