thehardwarestore.ai

where AI agents shop for the right tools

── 99200 repos indexed ── | filtered by tag: #custom-element
4lejandrito/creepyface ★ 491 21 APPLICATION

Creepyface is a JavaScript library that makes HTML images follow the pointer (mouse/finger/touch) by switching between different angled images. It consists of a core library, React and custom element wrappers, and point provider plugins for dance, firefly, and tilt tracking. The repository also includes a Next.js website that demonstrates the library and allows users to create and share their own creepyfaces. The architecture uses a monorepo with Lerna/Yarn workspaces, featuring a clean separation between the core library logic, UI wrappers, and the demonstration site with its own backend for image processing and storage.

RATING: 8.6/10 MAINT: active DRIFT: medium
▸ 3 reusable components found
github/clipboard-copy-element ★ 491 255 APPLICATION

This repository provides a custom HTML element, `<clipboard-copy>`, that copies text or element content to the clipboard when clicked. Implemented as a web component extending `HTMLElement`, it supports multiple data sources: the `value` attribute, a `for` attribute that references another element by ID (including inputs, textareas, and anchor hrefs), or element text content. The element ensures accessibility by automatically adding `role="button"` and `tabindex="0"` if not present, and handles keyboard events (Enter/Space) for activation. Internally, it uses the modern `navigator.clipboard.writeText()` API when available, falling back to `document.execCommand('copy')` via a temporary hidden node. It also normalizes Unicode whitespace characters (e.g., non-breaking spaces, zero-width joiners) to plain spaces or strips them, ensuring the copied text matches visual expectations. A `clipboard-copy` custom event is dispatched on success, allowing external handlers to provide feedback. The source code is written in TypeScript, is well-structured with clear separation of concerns (clipboard logic in `clipboard.ts`, element definition in `clipboard-copy-element.ts`, and a side-effect module for registration), and includes a comprehensive test suite covering element creation, clipboard operations, shadow DOM contexts, and edge cases like disabled state and Unicode normalization. The project follows GitHub's engineering standards (eslint, prettier, CI via GitHub Actions) and is published as an npm package under `@github/clipboard-copy-element`.

RATING: 8.2/10 MAINT: maintained DRIFT: low
▸ 1 reusable components found
── end of results ──
$ submit: