Kkwaenggwari · Open source

Malý rozměrem.Silný zvukem.

Open source nástroje pro stav a pohyb v React a React Native. Tři zaměřené balíčky, které fungují od prvního importu a rostou jen tolik, kolik potřebujete.

  • 3 balíčky
  • React · React Native
  • Deklarace TypeScript
  • Licence ISC

Udeřte do gongu. Každý nástroj odpovídá na zvuk po svém.

01 · Nástroje

Tři nástroje.Jeden rytmus.

Každý dělá jednu věc a dotáhne ji do konce. Používejte je samostatně nebo společně — jsou stavěné tak, aby do sebe zapadly.

restate

StavReact + React Native

Sdílejte ho jedním hookem.Uložte ho, až se rozhodnete.

Komponenty čtou stejnou hodnotu bez Provider, actions a reducerů. Překreslí se jen tehdy, když se změní jejich výběr, a ukládání i obnova proběhnou přesně, když řeknete.

  • Sdílené bez Provider
  • Odběr jen té části, kterou vyberete
  • Explicitní ukládání do IndexedDB nebo MMKV
Instalace
npm install @kkwaenggwari/restate

Živě

Dvě komponenty, jeden store

Stiskněte tlačítko na kterékoli straně. Oba panely čtou stejnou hodnotu restate() a mění se společně; štítek dopravy poslouchá jen jeden výběr.

Záhlaví

2 v košíku

Seznam produktů

2 v košíku

Animated

Pohybový engineReact DOM

Jedna hodnotadiriguje celou obrazovku.

Používejte v React DOM timing, spring a interpolate, které znáte z React Native Animated. Jedna hodnota řídí styl mnoha prvků bez renderu Reactu v každém snímku.

  • API React Native Animated, které znáte
  • Přerušení zachová polohu i rychlost
  • Uklidí po sobě, když vlastník zmizí
Instalace
npm install @kkwaenggwari/animated

Živě

Jedna Value, dvanáct tvarů

Posuvník mění jedinou Value. Poloha, otočení, velikost a rohy všech dvanácti tvarů se odvozují z ní. Stiskněte pružinu a pak v půli pohybu chytněte posuvník.

Animated Chorus

Hotové komponentyReact · React Native

Obtížné interakce,už hotové.

Rolující čísla, putující zvýraznění, seznamy, které pohnou jen tím, co se změnilo, sheety a akce přejetím. Předejte svá data — bez provider a volání nastavení — v React i React Native.

  • Čísla, karty, seznamy a sheety
  • Stejný import na webu i v nativních aplikacích
  • Nový vstup pokračuje od toho, co je na obrazovce
Instalace
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

Živě

Dashboard, který potřebuje jen data

Vyberte období: MotionHighlight se k němu přesune, MotionNumber se protočí, ProgressRing se naplní a MotionList pohne jen řádky, které se změnily.

DnesTento týdenTento měsíc

Návštěvy

1,284

  1. Domů
  2. Ceník
  3. Docs
  4. Blog

Ukázková data

02 · Soubor

Jeden úder.Vše se hýbe.

Tato scéna je postavená s Animated. Jediná Value s průběhem posouvání najednou řídí polohu, otočení, měřítko a průhlednost 48 tvarů.

  1. 01
    Zvuk

    Rozptýlené body se slévají do kruhů gongu.

  2. 02
    Rozdělení

    Kruh se rozdělí na tři a převezme barvu každého nástroje.

  3. 03
    Tvar

    Stávají se vazbami stavu, dráhou pohybu a sloupy sboru.

  4. 04
    Rytmus

    Vše se srovná a dopadne na stejnou dobu.

progress1.00

03 · Zásady

Malýod začátku do konce.

Začněte jedním importem

Žádný obalující provider ani globální nastavení předem. Přidávejte schopnosti, až o ně aplikace požádá.

Jen to, co je potřeba

Aktualizují se jen komponenty se změněným výběrem, prvky, které používají hodnotu, a řádky, které se posunuly.

Zodpovědný až do konce

Přerušený pohyb pokračuje od toho, co je na obrazovce, a odběry i animace se uvolní, když jejich vlastník zmizí.

Typovaný a zdokumentovaný

Každý balíček obsahuje deklarace TypeScript a dokumentace je k dispozici v 39 jazycích.

04 · Jméno

Kkwaenggwari,gong, který vede kapelu.

Vyslovuje se „kveng-gva-ri“. V korejském pungmulu udává hráč na vedoucí kkwaenggwari (꽹과리) rytmus celému souboru. Naše nástroje usilují o totéž: malé, ale zřetelné, aby celá vaše aplikace šla v jednom rytmu.

kkwaenggwariKkwaenggwari nese jméno podle kkwaenggwari (꽹과리), malého korejského gongu, do kterého se tluče paličkou. Jeho jasný, čistý zvuk dal jméno těmto malým open source nástrojům.