🎨 react COLORIC-react의 1.8KB 색상 선택기.신속하고 의존성이 없으며 사용자 정의 및 액세스 가능

📆 이야기

몇 달 전에 React 프로젝트에 사용할 색선택기 구성 요소를 검색하고 있습니다.
나는 좋은 소프트웨어 패키지를 찾는 데 많은 시간을 들였고, 가장 유행하는 React 색상 선택기react-color가 140KB(전체보다 훨씬 크다react-dom, 나무가 흔들려서는 안 되고, 접근할 수 없고, 키보드 내비게이션을 지원하지 않으며, 11개의 의존항을 끌어들일 수 있으며, 속도는 그것보다 빠르지 않다는 것을 알아차렸다.
그럼에도 불구하고 react-color 는 매주 170만 건의 다운로드를 받을 정도로 인기가 높다.그 중 가장 큰 이유는 현대의 요구와 일치하는 더 가벼운 대체품이 없기 때문이다.
그래서 하나 만들기로 했어요.주요 목표는 react-color보다 10배 이상 가벼운 현대 색 선택기 구성 요소를 만드는 것이다.
Ryan Christian, Alex Taktarov, 7월 이래로 저는 React 커뮤니티를 위해 가장 작고 빠른 색상 선택기를 만들기 위해 노력해 왔습니다.

🎉 이것이 바로 내가 태어난 이유다!

프레젠테이션:
https://omgovich.github.io/react-colorful
문서:
https://github.com/omgovich/react-colorful react-colorful(v4.1)의 현재 버전은 react-color보다 18배 가볍다.얘는 1.8KB밖에 안 돼!

🗜 왜 이렇게 작고 빨라?

1. 의존 관계 없음

대부분의 유행하는 선택기는 10KB가 넘는 전체 색 처리 라이브러리를 가져왔지만 react-colorful 소량의 수동 최적화된 색 변환 알고리즘만 제공했다.
예를 들어, react-color 는 14.4KB의 비용과 트리 디더링을 전혀 지원하지 않는 등 11개의 의존 항목을 도입했습니다.
우리는 경쟁이 가장 가볍다는 것을 확보하기 위해 tinycolor2 의존성을 없애는 데 많은 시간을 들였다.취약성 문제의 발생 가능성을 철저히 줄인 것은 말할 것도 없다.

2. 수업 없음

어떤 물건을 봉인해야 할 때, ES6 클래스는 매우 좋지만, 작은 JS 라이브러리를 만들고 싶다면, 클래스 성명은 당신의 가장 큰 적 중 하나가 될 것입니다.현재 축소기는 ES6 클래스 필드와 구성원 함수를 축소할 수 없습니다. 왜냐하면 대상에서 방법을 호출할 때 클래스를 추적할 수 없기 때문입니다.
이것이 바로 react-colorful 함수, 기능 구성 요소와 연결만 포함하는 이유다.
이것도 우리의 선택기 속도가 이렇게 빠른 원인 중의 하나다.

3. 다각형 채우기와 추가 코드 변환 없음

우리의 목표는 현대 브라우저뿐만 아니라 전통 브라우저도 지원하는 것이다.따라서 우리는 코드가 심지어 IE11과 호환되도록 Babel을 설정했다.
현대 언어 기능(예를 들어 react-colorful을 사용하여 라이브러리를 작성하면 보통 최종 사용자 체험을 원본 개발자 체험으로 바꾼다.이러한 현대 기능은 더 좋고 간결하게 쓰일 수 있지만, 비교적 오래된 브라우저에서 전송될 때, 그들은 통상적으로 더 큰 문장을 만들어 낸다.
이것이 바로 우리의 원본 코드가 현대 ECMAScript 기능에 있어서 이렇게 초라한 이유이다.예를 들어 우리는 async/await 이 아니라 Object.assign({}, color, { alpha }) 를 사용한다.네, 원본 코드는 더 오래되고 상세한 API를 사용했습니다. 이로 인해polyfill이 부족하여 가방 크기가 약 150바이트 감소했습니다.

4. 수동 최적화

우리는 라이브러리의 모든 부분의 최소 변화를 찾기 위해 size-limit 를 설치하고 다양한 방법을 시도했다.
이것은 말로 표현하기 어려워서 나는 단지 너희들과 하나의 예를 공유할 뿐이다.
우리는 값을 상한선과 하한 사이에 끼우는 간단한 함수가 있다.이 함수의 첫 번째 버전입니다.

export const clamp = (number, min = 0, max = 1) => {
  return Math.min(Math.max(number, min), max);
};

그러나 몇 차례의 실험을 거친 후에 우리는 그것을 다음과 같이 바꾸었다.

export const clamp = (number, min = 0, max = 1) => {
  return number > max ? max : number < min ? min : number;
};

당신의 눈은 당신을 속이지 않습니다. 우리는 더 긴 옵션을 선택했습니다.왜?축소로 두 번째 코드가 거의 두 배로 줄어들었다.참조:

Math.min(Math.max(n,i),a)
n>a?a:n<i?i:n

❤️ 읽어주셔서 감사합니다.

react Color는 크기, 성능, 접근성에 관심이 있습니다.나는 React 커뮤니티가 우리의 가치관을 공유하고 진일보한 프로젝트에 유용하다는 것을 발견하기를 바란다.
만약 당신이 GitHub에서 환매를 시작하거나 친구와 본문의 링크를 공유한다면 이것은 우리에게 큰 도움이 될 것이다🙏

움고비치 / 반응이 다채롭다

🎨 React 및 Preact 응용 프로그램을 위한 미세(2.5KB) 색상 선택기 구성 요소

react color는react와 Preact 응용 프로그램의 작은 색 선택기 구성 요소입니다

특징

작음: 2.5kb gzip(react color보다 14배 밝음).

트리 흔들기: 사용한 부분만 응용 프로그램 패키지로 가져옵니다.

신속: 연결 및 기능 구성 요소로만 구축됩니다.

방탄: 엄격한 글씨체로 써서 40여 차례의 테스트를 거쳤다.

간단: 인터페이스가 간단하고 사용하기 쉽다.

모바일 친화성: 모바일 및 터치스크린에 적합합니다.

액세스 가능: 안내서에 따라 보조 기술을 지원하는 사용자.

의존성 없음

현장 프레젠테이션

WAI-ARIA

Website

HEX Color Picker (CodeSandbox)

설치

npm install react-colorful --save

활용단어참조

"react Color"에서 {HexColorPicker} 가져오기;
const YourComponent=()=>{
const[color,setColor]=useState(#aabbcc”);
returnRGBA Color Picker (CodeSandbox)