@cc-heart/utils-client

🖥️ A collection of tools for the browser — DOM, clipboard, rAF, request & SCSS utilities

📖 Docs

The utils family · core: @cc-heart/utils · Node.js runtime: @cc-heart/utils-service · browser: @cc-heart/utils-client

Features

• 🧩 DOM — addClassName, removeClassName, classNames, addStyles, removeStyles, getStyles, getPadding, isHidden
• 📋 Clipboard — copyTextToClipboard with graceful fallback
• 🎞️ rAF — throttled requestAnimationFrame scheduler
• 🌐 Request — fetch-based Request class & createFetchRequest
• 🎨 CSS — generateCssNamespaceFn BEM-style namespace helper
• 💅 SCSS kit — variables, functions & mixins with customizable namespace
• 🌳 ESM + CJS dual builds with full TypeScript types

Install

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

Usage

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'

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';

LICENSE

@cc-heart/utils-client is licensed under the MIT License.