Getting Started

    @cc-heart/utils-client is a collection of tools for the browser.

    Install

    npm install @cc-heart/utils-client
# or
pnpm add @cc-heart/utils-client

    DOM helpers

    import { addClassName, removeClassName, classNames, addStyles, isHidden } from '@cc-heart/utils-client'

addClassName(el, 'active', 'visible')
removeClassName(el, 'hidden')
addStyles(el, { color: 'red', fontSize: '14px' })

const cls = classNames('btn', { 'btn--active': isActive }, ['extra'])

    Clipboard

    import { copyTextToClipboard } from '@cc-heart/utils-client'

copyTextToClipboard('hello world') // falls back when Clipboard API is unavailable

    rAF scheduler

    import { raf } from '@cc-heart/utils-client'

const stop = raf(() => {
  // runs at most every `rate` frames
}, 2)

stop() // cancel

    Request

    import { createFetchRequest } from '@cc-heart/utils-client'

const request = createFetchRequest()
// ...

    CSS namespace

    import { generateCssNamespaceFn } from '@cc-heart/utils-client'

const ns = generateCssNamespaceFn('cc')('button')
ns.b() // 'cc-button'
ns.e('icon') // 'cc-button__icon'
ns.m('active') // 'cc-button--active'

    SCSS Usage

    Create an overwrite file (e.g. overwrite.scss), and write the following content:

    @forward '@cc-heart/utils-client/scss/variable.scss' with (
  $namespace: 'cc'
);

    Create a new scss file (e.g. lib.scss), and write the following content:

    @use './overwrite.scss' as *;

@forward '@cc-heart/utils-client/scss/function.scss';
@forward '@cc-heart/utils-client/scss/mixins.scss';

    API Reference

    See the auto-generated API documentation.

    Try it online

    DOM helpers + CSS namespace, live:

    Loading...

    Copy to clipboard:

    Loading...