Kkwaenggwari · Öppen källkod

Litet till storleken.Starkt i klangen.

Verktyg med öppen källkod för state och rörelse i React och React Native. Tre fokuserade paket som fungerar från första importen och bara växer så långt du behöver.

  • 3 paket
  • React · React Native
  • TypeScript-deklarationer
  • ISC-licens

Slå på gongen. Varje verktyg svarar på klangen på sitt eget sätt.

01 · Verktygen

Tre instrument.En takt.

Var och en gör ett jobb hela vägen. Använd dem var för sig eller tillsammans — de är gjorda för att passa ihop.

restate

StateReact + React Native

Dela med en hook.Spara när du bestämmer.

Komponenter läser samma värde utan Provider, actions eller reducers. De renderas om bara när deras urval ändras, och sparande och återställning sker precis när du säger till.

  • Delat utan Provider
  • Prenumerera bara på den del du väljer
  • Explicit sparande till IndexedDB eller MMKV
Installera
npm install @kkwaenggwari/restate

Live

Två komponenter, en store

Tryck på en knapp på valfri sida. Båda panelerna läser samma restate()-värde och ändras tillsammans; fraktmärket lyssnar bara på ett urval.

Sidhuvud

2 i varukorgen

Produktlista

2 i varukorgen

Animated

RörelsemotorReact DOM

Ett värdedirigerar hela skärmen.

Använd timing, spring och interpolate som du känner från React Native Animated i React DOM. Ett värde styr stilen på många element, utan React-rendering per bildruta.

  • React Native Animated-API:t du känner
  • Avbrott behåller position och hastighet
  • Städar upp när ägaren försvinner
Installera
npm install @kkwaenggwari/animated

Live

Ett Value, tolv former

Reglaget ändrar ett enda Value. Position, vridning, storlek och hörn för alla tolv former härleds från det. Tryck på fjädern och ta sedan tag i reglaget mitt i rörelsen.

Animated Chorus

Färdiga komponenterReact · React Native

De svåra interaktionerna,redan klara.

Rullande siffror, en markering som flyttar sig, listor som bara rör det som ändrats, sheets och svepåtgärder. Skicka in din data — ingen provider eller setup-anrop — i React och React Native.

  • Siffror, flikar, listor och sheets
  • Samma import på webb och native
  • Ny inmatning fortsätter från det som syns på skärmen
Installera
npm install @kkwaenggwari/animated-chorus @kkwaenggwari/animated

Live

En instrumentpanel som bara behöver data

Välj en period: MotionHighlight flyttar dit, MotionNumber rullar, ProgressRing fylls och MotionList flyttar bara de rader som ändrats.

IdagDen här veckanDen här månaden

Besök

1,284

  1. Start
  2. Priser
  3. Docs
  4. Blogg

Exempeldata

02 · Ensemble

Ett slag.Allt rör sig.

Den här scenen är byggd med Animated. Ett enda Value med scrollförloppet dirigerar samtidigt position, vridning, skala och opacitet för 48 former.

  1. 01
    Klinga

    Utspridda punkter samlas till en gongs ringar.

  2. 02
    Dela

    Ringen delar sig i tre och får varje verktygs färg.

  3. 03
    Forma

    De blir länkarna i state, rörelsens bana och körens pelare.

  4. 04
    Takt

    Allt ställer upp sig och landar på samma slag.

progress1.00

03 · Principer

Liten,hela vägen.

Börja med en import

Ingen omslutande provider eller global setup i förväg. Lägg till förmågor först när appen ber om dem.

Bara det som behövs

Bara komponenter vars urval ändrats, element som använder ett värde och rader som flyttats uppdateras.

Ansvarsfull till slutet

Avbruten rörelse fortsätter från det som syns på skärmen, och prenumerationer och animationer släpps när deras ägare försvinner.

Typat och dokumenterat

Varje paket levereras med TypeScript-deklarationer, och dokumentationen finns på 39 språk.

04 · Namnet

Kkwaenggwari,gongen som leder bandet.

Uttalas ”kveng-gwa-ri”. I koreansk pungmul anger den ledande kkwaenggwari-spelaren (꽹과리) takten för hela ensemblen. Våra verktyg strävar efter samma sak: små men tydliga, så att hela din app går i samma takt.

kkwaenggwariKkwaenggwari har fått sitt namn efter kkwaenggwari (꽹과리), en liten koreansk gong som man slår med en klubba. Dess klara, ljusa klang gav namnet åt de här små verktygen med öppen källkod.