HN 日本語サマリー

← 一覧へ戻る
Web開発

Kamod Hooks – ahooksから移植されたPreact hooksライブラリ

Kamod Hooks – a Preact hooks library ported from ahooks (kamod-ch.github.io)

3 pointsby zahir7771 コメント

要約

Kamod Hooksは、Preact向けに特別に構築された、型付けされたツリーシェイク可能なプロダクションレディなHooksライブラリです。ahookから移植されており、軽量で、実用的なPreactの使用に焦点を当てています。ライブデモとTypeScriptシグネチャを提供し、開発者がPreactの機能をより迅速に出荷できるように設計されています。

全文翻訳

Preact向けのプロダクションレディなHooks Preactのために特別に構築された、型付けされたツリーシェイク可能な軽量コレクションのHooksです。 kamod-hooks Preactファースト · 型付け済み · ツリーシェイク可能 レトロなドキュメント、モダンなHooks プロダクションレディなHooksでPreact機能をより迅速に出荷しましょう。 セットアップから始め、ライブデモで動作を確認し、公開されているTypeScriptシグネチャとともに実装準備のできたHookパターンをコピーできます。 セットアップから始める すべてのHooksを参照 GitHubを開く 78 ドキュメント化されたHooks 81 ライブデモ 0 コアにランタイム依存性なし インストール pnpm npm yarn pnpm add @kamod-ch/hooks preact live-demo.tsx ライブデモ ソースが含まれています 動作優先 ドキュメント体験をプレビューする 実装する前に、実際のHookをテストし、正確なソースを検査し、APIの形状を確認してください。 ライブ 実際のインタラクティブな状態 正確 表示されているソースをコピー 型付け済み 公開されたパッケージと一致 useToggle 明示的な状態変更で2つの実際の値を切り替えます。 レイアウト: list Toggle Set list Set grid ソースを隠す ```jsx import { useToggle } from '@kamod-ch/hooks' export default function UseToggleDemo() { const [value, actions] = useToggle('list', 'grid') return ( <div> <p><strong>Layout:</strong> {value}</p> <div class="demo-actions"> <button type="button" onClick={actions.toggle}>Toggle</button> <button type="button" onClick={actions.setLeft}>Set list</button> <button type="button" onClick={actions.setRight}>Set grid</button> </div> </div> ) } ``` Kamod Hooksの理由 実用的なPreactの使用に焦点を当てる このライブラリは、packages/coreの実際の実装を反映しており、ドキュメントは出荷可能な例に基づいています。 PX Preactファースト Hooksは、Reactに特化したAPIサーフェスをラップするのではなく、Preact向けに作成されています。 TS デフォルトで型付け済み 配布される宣言は実装と生成されたドキュメント出力と整合しています。 API ツリーシェイク可能なエクスポート メインパッケージからインポートするか、追加のランタイムコストなしでHookごとのサブパスを使用します。 WEB ブラウザネイティブなHooks ストレージ、オブザーバー、フルスクリーン、WebSocket、URLの状態は具体的な例でカバーされています。 仕組み 概要からコードに素早く移行する ドキュメントをテンプレートのように使用します。ガイドから始め、デモで動作を確認し、必要な正確なソース形状をコピーします。 01 ガイドを読む パッケージをインストールし、インポートスタイルを選択し、実装前にSSRに関する注意点を確認します。 02 ライブサンプルをテストする 出荷前にインタラクティブなデモを使用して、動作、デフォルト値、およびエッジケースを検証します。 03 正確なAPIをコピーする ページのシグネチャとデモソースを本番使用の基準として使用します。 探索 概要から実装の詳細に移行する ガイドから始めるか、Hooksインデックス全体をスキャンするか、エクスポートされたユーティリティに直接ジャンプします。 ガイド インストール、インポート、SSRに関する注意点、TypeScriptの使用方法、移行の詳細。 Hooksリファレンス すべての公開されているHookエクスポートには、独自のページ、ライブデモ、ソーススニペットがあります。 ユーティリティ clearCache、configResponsive、createUpdateEffectのリファレンスページ。 ドキュメントから始めて、より早く出荷しましょう。 セットアップには開始ガイドを使用し、デモ、シグネチャ、実装準備のできた例についてはHookページにジャンプしてください。 開始ガイドを開く すべてのHooksを参照 PX Preactファースト Hooksは、Reactに特化したAPIサーフェスをラップするのではなく、Preact向けに作成されています。 TS デフォルトで型付け済み 配布される宣言は実装と生成されたドキュメント出力と整合しています。 API ツリーシェイク可能なエクスポート メインパッケージからインポートするか、追加のランタイムコストなしでHookごとのサブパスを使用します。 WEB ブラウザネイティブなHooks ストレージ、オブザーバー、フルスクリーン、WebSocket、URLの状態は具体的な例でカバーされています。