Skip to main content

addAtom

You can create your own Atomic Props with addAtom.

Basic Usage​

import { 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:

Result
Loading...
Live Editor

Advanced​

import { 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:

Result
Loading...
Live Editor