Kkwaenggwari · Open source

Klein gebouwd.Luid van klank.

Open-source tools voor state en beweging in React en React Native. Drie gerichte pakketten die werken vanaf de eerste import en alleen zo ver groeien als jij nodig hebt.

  • 3 pakketten
  • React · React Native
  • TypeScript-declaraties
  • ISC-licentie

Sla op de gong. Elke tool beantwoordt de klank op zijn eigen manier.

01 · De tools

Drie instrumenten.Eén maat.

Elk doet één taak, helemaal. Gebruik ze los of samen — ze zijn gemaakt om in elkaar te passen.

restate

StateReact + React Native

Deel het met één hook.Sla het op wanneer jij besluit.

Componenten lezen dezelfde waarde zonder Provider, actions of reducers. Ze renderen alleen opnieuw als hun selectie verandert, en opslaan of terugzetten gebeurt precies wanneer jij het zegt.

  • Gedeeld zonder Provider
  • Abonneer je alleen op het deel dat je selecteert
  • Expliciet opslaan in IndexedDB of MMKV
Installeren
npm install @kkwaenggwari/restate

Live

Twee componenten, één store

Druk aan een van beide kanten op een knop. Beide panelen lezen dezelfde restate()-waarde en veranderen samen; het verzendlabel luistert alleen naar één selectie.

Header

2 in winkelwagen

Productlijst

2 in winkelwagen

Animated

BewegingsengineReact DOM

Eén waardedirigeert het hele scherm.

Gebruik in React DOM de timing, spring en interpolate die je kent van React Native Animated. Eén waarde stuurt de stijl van veel elementen aan, zonder React-render per frame.

  • De React Native Animated API die je kent
  • Onderbrekingen behouden positie en snelheid
  • Ruimt op als de eigenaar verdwijnt
Installeren
npm install @kkwaenggwari/animated

Live

Eén Value, twaalf vormen

De schuifregelaar verandert één Value. Positie, draaiing, grootte en hoeken van alle twaalf vormen volgen daaruit. Druk op de veer en pak dan midden in de beweging de schuifregelaar.

Animated Chorus

Kant-en-klare componentenReact · React Native

De lastige interacties,al af.

Rollende getallen, een markering die meeverhuist, lijsten die alleen bewegen wat veranderde, sheets en veegacties. Geef je data mee — geen provider of setup-aanroep — in React en React Native.

  • Getallen, tabs, lijsten en sheets
  • Dezelfde import op web en native
  • Nieuwe invoer gaat verder vanaf wat op het scherm staat
Installeren
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

Live

Een dashboard dat alleen data nodig heeft

Kies een periode: MotionHighlight verhuist ernaartoe, MotionNumber rolt, ProgressRing vult zich en MotionList beweegt alleen de rijen die veranderden.

VandaagDeze weekDeze maand

Bezoeken

1,284

  1. Home
  2. Prijzen
  3. Docs
  4. Blog

Voorbeelddata

02 · Ensemble

Eén slag.Alles beweegt.

Dit podium is gebouwd met Animated. Eén Value met je scrollvoortgang dirigeert tegelijk de positie, draaiing, schaal en dekking van 48 vormen.

  1. 01
    Klinken

    Verspreide punten komen samen in de ringen van een gong.

  2. 02
    Splitsen

    De ring splitst zich in drieën en neemt de kleur van elke tool aan.

  3. 03
    Vormen

    Ze worden de verbindingen van state, de baan van beweging en de pilaren van het koor.

  4. 04
    Maat

    Alles lijnt uit en valt op dezelfde tel.

progress1.00

03 · Principes

Klein,van begin tot eind.

Begin met één import

Geen omhullende provider of globale setup vooraf. Voeg mogelijkheden pas toe als je app erom vraagt.

Alleen wat nodig is

Alleen componenten waarvan de selectie veranderde, elementen die een waarde gebruiken en rijen die verschoven, worden bijgewerkt.

Verantwoordelijk tot het eind

Onderbroken beweging gaat verder vanaf wat op het scherm staat, en abonnementen en animaties worden vrijgegeven als hun eigenaar verdwijnt.

Getypeerd en gedocumenteerd

Elk pakket bevat TypeScript-declaraties, en de documentatie is beschikbaar in 39 talen.

04 · De naam

Kkwaenggwari,de gong die de band aanvoert.

Spreek het uit als „kweng-gwa-rie”. In de Koreaanse pungmul geeft de leidende kkwaenggwari-speler (꽹과리) de maat aan voor het hele ensemble. Onze tools streven hetzelfde na: klein maar helder, zodat je hele app op één maat loopt.

kkwaenggwariKkwaenggwari dankt zijn naam aan de kkwaenggwari (꽹과리), een kleine Koreaanse gong die je met een stokje bespeelt. Zijn heldere, felle klank inspireerde de naam van deze kleine open-source tools.