Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz. Devamını oku.

Bir React uygulamasına renk seçici eklemek, kullanıcıların kullanmak istedikleri renkler hakkında karar vermelerini çok daha kolaylaştırabilir. Renk seçiciler, bir grafik uygulamasıyla veya kişiselleştirmeyi destekleyen herhangi bir uygulamayla çalışan kullanıcılar için harika bir araçtır.

tepki-renk kitaplığı, ihtiyaçlarınıza uygun çok çeşitli seçenekler ve birçok renk seçici stili sunar.

Uygulamanıza Renk Seçici Ekleme

tepki-renk kitaplığı, React Uygulamanıza bir renk seçici eklemeyi kolaylaştırır. Bu kitaplık, kullanıcıların uygulamaları için renkleri seçmeleri için basit ve sezgisel bir yol sağlar. Kodun kullanımı basittir ve harika bir kullanıcı deneyimi sağlar. Bir renk seçici eklemeden önce yapmanız gerekenler basit bir tepki uygulaması oluştur.

Reaksiyon rengine genel bakış

tepki-renk kitaplığı, React uygulamanıza bir renk seçici eklemenin harika bir yoludur. Kullanıcıların bir dizi renk arasından seçim yapmasına olanak tanıyan, kullanımı kolay bir arayüz sunar. Kitaplık ayrıca renk seçiciyi özelleştirmek için kullanabileceğiniz aksesuarlar da sağlar.

instagram viewer

React uygulamanıza bir renk seçici ekleme kodu basittir. tepki-renk kitaplığını kullanmak için, önce kullanarak kitaplığı yüklemeniz gerekir. npm, Node.js için paket yöneticisi.

npm i tepki-renk

Ardından, renk seçiciyi görüntülemek istediğiniz bileşene aşağıdaki kodu eklemeniz yeterlidir:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { Eskiz Seçici } itibaren"tepki-renk"
sınıfBileşenuzanırTepki.Bileşen{
 render() {
geri dönmek<Eskiz Seçici />
 }
}
ihracatvarsayılan Bileşen

Yukarıdaki kod, temel bir renk seçici oluşturacaktır. Kullanıcıların bir dizi renk arasından seçim yapmasına olanak tanır. Seçici, uygulamanızın diğer bölümlerinde kullanabileceğiniz seçili rengin HEX kodunu da görüntüler.

Mevcut Aksesuarlar

tepki-renk kitaplığı, renk seçiciyi özelleştirmek için aksesuarlar sağlar. Seçicinin boyutunu, mevcut renkleri ve çok daha fazlasını değiştirmek için bu aksesuarları kullanabilirsiniz.

Renk Seçici için mevcut donanımlar aşağıdadır:

  • Genişlik: Renk seçicinin piksel cinsinden genişliği.
  • yükseklik: Renk seçicinin piksel cinsinden yüksekliği.
  • renk: Seçicinin başlangıç ​​rengi.
  • onChange: Renk değiştiğinde çalışan bir geri arama işlevi.
  • onChangeComplete: Renk değişikliği tamamlandığında çalışan bir geri arama işlevi.

Aşağıdaki kod, Renk Seçici için mevcut tüm donanımların nasıl kullanılacağını gösterir:

içe aktarmak Tepki itibaren'tepki'
içe aktarmak { Eskiz Seçici } itibaren"tepki-renk"

sınıfBileşenuzanırTepki.Bileşen{

 render() {
geri dönmek (
 genişlik={200}
 yükseklik={200}
 renk="#ff0000"
 onChange={(renk) => konsol.log (renkli)}
 onChangeComplete={(renk, olay)=> konsol.log (renkli)}
 />
 )
 }
}
ihracatvarsayılan Bileşen

Yukarıdaki kod, 200 piksel genişliğe, 200 piksel yüksekliğe, #ff0000 başlangıç ​​rengine ve bir renk paletine sahip bir renk seçici oluşturacaktır. Ayrıca renk kodu için bir giriş alanı gösterecek ve alfa kanalını gösterecektir. Renk değiştiğinde, onChange geri aramasını çağırır ve yeni rengi konsola kaydeder.

Ek Renk Seçiciler Ekleme

tepki-renk kitaplığı, aralarından seçim yapabileceğiniz bir dizi farklı renk seçici sağlar ve son bölümde kullanılan SketchPicker'a ek olarak ChromePicker'ı da kullanabilirsiniz.

SketchPicker'ı içe aktardığınız gibi ChromePicker'ı içe aktarın:

içe aktarmak { ChromePicker } itibaren"tepki-renk";

ChromePicker'ı içe aktardıktan sonra, aşağıdaki kodu ekleyerek uygulamanızda kullanabilirsiniz:

 renk={ Bu.durum.arka plan }
 onChangeComplete={ Bu.handleChangeComplete }
 devre dışı bırakAlfa={doğru}
/>

ChromePicker, SketchPicker ile aynı donanımları alır, ancak disableAlpha prop ile yapabileceğiniz alfa kanalını devre dışı bırakma yeteneği gibi birkaç ek seçeneğe de sahiptir. Rengi doğrudan color prop ile de ayarlayabilirsiniz.

React-color kitaplığında Block, Twitter ve GitHub gibi başka renk seçiciler de vardır. Bu seçicilerin her birinin kendi donanımı vardır, bu nedenle daha fazla bilgi için belgeleri kontrol ettiğinizden emin olun.

Bir Renk Seçici ile Kullanıcı Deneyiminizi Geliştirin

React uygulamanıza bir renk seçici eklemek, kullanıcı deneyimini iyileştirmenin harika bir yoludur. Kullanıcıların uygulamaları için renkleri hızlı ve kolay bir şekilde seçmelerine olanak tanır. Ayrıca, Tailwind CSS'yi kullanarak renk seçiciyi daha kullanıcı dostu hale getirebilirsiniz.