Jak dodać próbnik kolorów do swojej aplikacji React
Dodanie próbnika kolorów do aplikacji React może znacznie ułatwić użytkownikom podejmowanie decyzji dotyczących kolorów, których chcą używać. Selektory kolorów to doskonałe narzędzie dla użytkowników pracujących z aplikacją graficzną lub dowolną aplikacją obsługującą personalizację.
Biblioteka React-Color oferuje szeroką gamę opcji i wiele stylów selektora kolorów dostosowanych do Twoich potrzeb.
Dodawanie selektora kolorów do Twojej aplikacji
Biblioteka React-Color ułatwia dodanie próbnika kolorów do aplikacji React. Ta biblioteka zapewnia użytkownikom prosty i intuicyjny sposób wybierania kolorów dla ich aplikacji. Kod jest prosty w użyciu i zapewnia doskonałe wrażenia użytkownika. Przed dodaniem próbnika kolorów musisz najpierw utworzyć prostą aplikację reagującą.
Przegląd reagowania na kolor
Biblioteka React-Color to świetny sposób na dodanie próbnika kolorów do aplikacji React. Oferuje łatwy w użyciu interfejs, który pozwala użytkownikom wybierać spośród wielu kolorów. Biblioteka zawiera również rekwizyty, których można użyć do dostosowania próbnika kolorów.
Kod dodawania próbnika kolorów do aplikacji React jest prosty. Aby użyć biblioteki React-color, musisz najpierw zainstalować bibliotekę za pomocą npm, menedżera pakietów dla Node.js.
npm i react-color
Następnie po prostu dodaj następujący kod do komponentu, w którym chcesz wyświetlić próbnik kolorów:
import React from 'react'
import { SketchPicker } from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
export default Component
Powyższy kod wyrenderuje podstawowy selektor kolorów. Umożliwi to użytkownikom wybór spośród szerokiej gamy kolorów. Selektor wyświetli również kod szesnastkowy wybranego koloru, którego możesz użyć w innych częściach aplikacji.
Dostępne rekwizyty
Biblioteka reakcji kolorów zawiera rekwizyty do dostosowywania próbnika kolorów. Możesz użyć tych rekwizytów, aby zmienić rozmiar selektora, dostępne kolory i wiele więcej.
Poniżej znajdują się dostępne rekwizyty dla Próbnika kolorów:
- width : szerokość selektora kolorów w pikselach.
- height : wysokość selektora kolorów w pikselach.
- color : Początkowy kolor selektora.
- onChange : Funkcja wywołania zwrotnego, która jest uruchamiana, gdy zmienia się kolor.
- onChangeComplete : Funkcja wywołania zwrotnego, która jest uruchamiana po zakończeniu zmiany koloru.
Poniższy kod pokazuje, jak używać wszystkich dostępnych rekwizytów dla Próbnika kolorów:
import React from 'react'
import { SketchPicker } from 'react-color'
class Component extends React.Component {
render() {
return (
<SketchPicker
width={200}
height={200}
color="#ff0000"
onChange={(color) => console.log(color)}
onChangeComplete={(color, event)=> console.log(color)}
/>
)
}
}
export default Component
Powyższy kod wyrenderuje selektor kolorów o szerokości 200 pikseli, wysokości 200 pikseli, początkowym kolorze #ff0000 i palecie kolorów. Pokaże również pole wprowadzania kodu koloru i wyświetli kanał alfa. Gdy kolor się zmieni, wywoła wywołanie zwrotne onChange i zarejestruje nowy kolor w konsoli.
Dodawanie dodatkowych selektorów kolorów
Biblioteka React-Color zapewnia szereg różnych selektorów kolorów do wyboru, a oprócz SketchPicker użytego w ostatniej sekcji, możesz także użyć ChromePicker.
Zaimportuj ChromePicker w taki sam sposób, jak zaimportowałeś SketchPicker:
import { ChromePicker } from 'react-color';
Po zaimportowaniu ChromePicker możesz użyć go w swojej aplikacji, dodając następujący kod:
<ChromePicker
color={ this.state.background }
onChangeComplete={ this.handleChangeComplete }
disableAlpha={true}
/>
ChromePicker ma te same rekwizyty co SketchPicker, ale ma też kilka dodatkowych opcji, takich jak możliwość wyłączenia kanału alfa, co można zrobić za pomocą rekwizytu disableAlpha. Możesz także ustawić kolor bezpośrednio za pomocą rekwizytu koloru.
W bibliotece reagowania na kolory dostępne są również inne selektory kolorów, takie jak Block, Twitter i GitHub. Każdy z tych zbieraczy ma swoje własne rekwizyty, więc sprawdź dokumentację, aby uzyskać więcej informacji.
Popraw wrażenia użytkownika dzięki próbnikowi kolorów
Dodanie próbnika kolorów do aplikacji React to świetny sposób na poprawę doświadczenia użytkownika. Pozwala użytkownikom szybko i łatwo wybierać kolory dla swoich aplikacji. Możesz także uczynić próbnik kolorów bardziej przyjaznym dla użytkownika za pomocą CSS Tailwind.
Dodaj komentarz