Awesome Components

Awesome Components, eski HTML / CSS / JS denemelerimdeki canvas ve Three.js efektlerini alıp React bileşenlerine çevirdiğim bir kütüphane; her birini başka bir projeye tek import ile gömebiliyorsun. Depoda iki parça var: mihrimatrix-awesome-components adıyla paketlenen kütüphane ve aynı bileşenleri bir laboratuvar gibi sergileyen bir Vite vitrin uygulaması. Vitrinde bir bileşen seçince canlı önizlemesi açılıyor. Prop'larını kontrollerle anında değiştirebiliyorsun, kopyaladığın kullanım kodu da o anki ayarlarla geliyor; yani beğendiğin hali doğrudan kendi projene yapıştırabilirsin.

Kütüphanede on sekiz efekt var: havai fişek, kamp ateşi, yağmur ekranı, yıldız alanı, iki saat (SlideClock ve DigitalClock3D), rastgele kelimeler, yerçekimli ve birbirini çeken parçacıklar, birkaç gökkuşağı efekti ve iki Three.js sahnesi (ChillLion, RacingLines). Bir kısmını Türkçe adlarıyla da import edebilirsin: HavaiFisek, KampAtesi, YagmurEkrani, YercekimliParcaciklar gibi.

import { RainScreen } from "mihrimatrix-awesome-components";
 
<RainScreen height={420} density={1.15} speed={0.9} interactive showCity />

Gömüldüğü sayfaya karışmamak

Kütüphaneyi kullanmak için ayrıca bir CSS dosyası import etmen gerekmiyor. Stilleri JS tarafında sayfaya bir kez enjekte ediyorum ve bütün kurallar .mxac-root kökünün altında tanımlı. Bunun sebebi, gömüldüğü projedeki global sınıf adlarıyla çakışmamak. Stilleri elle yönetmek istersen componentStyles, ensureComponentStyles() ve kök sınıf adı COMPONENT_ROOT_CLASS dışarıya açık.

React, ReactDOM (>=18) ve Three.js (>=0.160) peer dependency; bu yüzden kütüphane, içine gömüldüğü uygulamanın kendi React kopyasıyla çalışıyor. Vite ile ES ve UMD biçimlerinde derleniyor, TypeScript tip tanımları da yanında geliyor.

Görünmeyen efekt durur

Bileşenler genişliklerini sayfadan değil, içine kondukları kutudan alıyor; height, className ve style de hepsinde ortak. Canvas ve Three.js animasyonları ekranın dışına kayınca duruyor, tekrar görününce devam ediyor. Böylece aynı sayfaya birden fazla efekt gömsen de o an görünmeyenler boşuna CPU ya da GPU harcamıyor.

Saatler dışındaki bileşenler ayrıca bir paused prop'u alıyor. Bazılarının davranışını değiştiren kendi prop'ları da var: havai fişekte parçacık sayısı, patlama boyutu ve otomatik atış; kamp ateşinde yoğunluk, kıvılcım ve kütük; saatlerde de 24 saat ve saniye seçenekleri gibi.