React용 400B 클립보드 라이브러리를 만들었습니다 (agnostic core 포함)

Source: Dev.to

Introduction

클립보드에 복사하는 것은 간단해 보이지만… 제대로 하려면 쉽지 않습니다.
권한, 비동기 API, 브라우저 quirks, 그리고 UI 피드백 때문에 한 줄로 끝나야 할 작업이 불필요한 보일러플레이트가 되곤 합니다.

lite-clipboard은 프레임워크에 구애받지 않는 코어와 React 훅을 제공하는, 아주 작고 의존성이 없는 클립보드 라이브러리입니다.

• 코어를 어디서든 사용 가능 (vanilla JS, Vue, Svelte 등)
• React 경험을 깔끔하게 제공하는 훅 사용

React Hook

import { useClipboard } from 'lite-clipboard';

function CopyButton({ text }) {
  const { copied, copy } = useClipboard();

  return (
     copy(text)}>
      {copied ? 'Copied!' : 'Copy'}
    
  );
}

간단하고, 반응형이며, 보일러플레이트가 없습니다.

Core (Framework‑agnostic)

React를 사용하지 않는다면:

import { copy } from 'lite-clipboard/core';

await copy("Hello world");

프레임워크가 필요 없습니다.

Comparison

• Core first → 로직이 프레임워크와 독립적
• Thin adapters → React는 단순히 래퍼일 뿐
• Minimal footprint → 바이트 하나하나가 중요
• Better DX → 코드가 적고, 버그가 적음

Features

• React 훅 ~400 bytes, 코어 ~250 bytes
• 의존성 0개
• 적절한 권한 처리를 포함한 비동기 API
• 빠른 로딩을 위한 작은 번들 사이즈

Links

• GitHub:
• npm:
• Product Hunt:

유용하다고 생각하시면 Product Hunt에서 지원해 주시면 정말 감사하겠습니다 🙌. 피드백, 댓글, 혹은 단순한 찬성표도 큰 도움이 됩니다!