01 · 工具
每個工具都把一件事做到底。可以單獨使用，也可以組合使用——它們本來就是為了彼此契合而設計的。
狀態管理React + React Native
一個 Hook 就能共享，何時儲存由你決定。
不需要 Provider、action 或 reducer，元件就能讀取同一個值。只有選取的部分改變時才會重新渲染，儲存與還原只在你指定的時候發生。
npm install @kkwaenggwari/restate即時
按下任一邊的按鈕。兩個面板讀取同一個 restate() 值並一起變化；運費標章只監聽一個選取結果。
頁首
2 件在購物車中
商品清單
2 件在購物車中
動態效果引擎React DOM
一個值，指揮整個畫面。
在 React DOM 上使用你在 React Native Animated 中熟悉的 timing、spring 和 interpolate。一個值驅動眾多元素的樣式，而且不會每一格都觸發 React 渲染。
npm install @kkwaenggwari/animated即時
滑桿只改變一個 Value，十二個形狀的位置、旋轉、大小和圓角全都由它推導。按一下彈簧，再趁動畫進行中抓住滑桿試試。
完成品元件React · React Native
難做的互動，已經替你完成。
滾動的數字、會移動的醒目標示、只有變動項目才會動的清單、底部面板與滑動操作。只要傳入資料，不需要 Provider 或初始化呼叫，React 與 React Native 都能用。
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated即時
選一個時段：MotionHighlight 移過去，MotionNumber 滾動，ProgressRing 填滿，MotionList 只移動有變化的列。
造訪次數
1,284
範例資料
02 · 合奏
這個舞台是用 Animated 打造的。一個保存捲動進度的 Value，同時指揮 48 個形狀的位置、旋轉、縮放與透明度。
散落的點聚成銅鑼的圓環。
圓環一分為三，各自染上每個工具的顏色。
它們變成狀態的連線、動態的軌跡與合唱的柱子。
一切排列整齊，落在同一個節拍上。
progress
03 · 原則
一開始不需要包住整個應用程式的 Provider 或全域設定。應用程式需要什麼功能，再加上什麼功能。
只有選取結果改變的元件、使用某個值的元素，以及有移動的列會被更新。
被中斷的動態會從畫面上的當下狀態繼續；擁有者消失時，訂閱與動畫都會被釋放。
每個套件都內建 TypeScript 型別宣告，文件提供 39 種語言。
04 · 名字的由來
哐呱哩（Kkwaenggwari）取自韓國傳統打擊樂器「꽹과리」的發音，「哐」正是銅鑼敲響的聲音。在韓國傳統農樂（풍물）中，領頭敲꽹과리的樂手為整個合奏定下節拍。我們的工具也想做到這樣：小而清晰，讓整個應用程式踩在同一個節拍上。
kkwaenggwari哐呱哩（Kkwaenggwari）這個名字來自韓國傳統打擊樂器「꽹과리」的發音。它是一面用槌敲擊的小銅鑼，聲音明亮清脆——我們也想做出這樣小而有存在感的開源工具。