React를 위한 새로운 경량 UI 구성 요소 라이브러리인 react-creme을 소개합니다.

✨ 리액트크림이란?

react-creme은 React를 위한 새로운 UI 툴킷(구성 요소 라이브러리라고도 함)입니다.

40+ High quality UI components 을 사용하면 react-creme은 모든 모양과 크기의 앱을 빌드하기 위해 즉시 사용할 수 있는 성능 UI 요소의 전체 목록과 함께 제공됩니다.

무게~43kb (minzipped size)에 불과한 react-creme은 가벼우며 그렇게 유지하려고 합니다. 라이브러리는 현재 매우 최소한의 종속성을 가지고 있으며 계획은 외부 종속성을 줄이고 향후 라이브러리를 완전히 독립적으로 만드는 것입니다.

❓왜

목표는 더 가벼운 UI 구성 요소 라이브러리를 구축하는 동시에 강력하고 설정 및 구성이 쉬운 툴킷을 제공하는 것이었습니다.

라이브러리는 구성 요소 전반에 걸쳐 이해하기 쉽고 일관성이 있는 직관적인 API를 제공합니다.

💪 타이프스크립트

라이브러리는 완전히 typescript로 작성되었으며 구성 요소는 표준과 일치하는 방식으로 강력하게 입력되었습니다.

♿ 접근성

react-creme는 접근성을 중요하게 생각합니다. 모든 UI 요소는 접근성 불만이며 모든 브라우저에서 원활하게 작동하도록 키보드 기반 탐색이 구현되었습니다.

🎨 테마

react-creme에는 전체 테마 프로세스를 쉽고 번거롭지 않게 만드는 내장 ThemeProvider가 함께 제공됩니다.

색상, 글꼴 크기, 아이콘 크기를 쉽고 빠르게 사용자 정의할 수 있습니다.

⚡실적

구성 요소는 가볍고 견고하며 List와 같은 요소는 기본적으로 가상화 기능과 함께 제공됩니다. 가상화는 현재 List 및 Dropdown과 같은 요소에서 지원되지만 더 큰 데이터 세트를 처리하는 구성 요소에 곧 도입될 예정입니다.

설치

react-creme는 npm에서 사용할 수 있으며 npm 또는 yarn을 통해 설치할 수 있습니다.

yarn add react-creme

또는

npm install react-creme

시작하기

import { Button } from 'react-creme';
import 'react-creme/dist/react-creme.css';

const App = () => {
  return <Button label="Save" onClick={()=>alert("Saved")} />
};

export default App

모든 것이 잘 진행되면 버튼이 렌더링되어야 하고 클릭하면 "저장됨"메시지가 표시되어야 합니다.

슬라이더 구성 요소는 어떻습니까?

import { Slider} from 'react-creme';
import 'react-creme/dist/react-creme.css';

const App = () => {
  return <Slider end={13} knobShape="square" knobSize={15} position="top" start={4} />
};

export default App

슬라이더에서 가질 수 있는 모든 멋진 것들을 확인할 수 있습니다here.

✨ Explore All the Components

⚡다음 내용

🌒 - 다크 모드 지원 작업이 진행 중이며 베타 릴리스의 일부로 출시될 예정입니다.

🌈 - 더 많은 구성 요소

🛣️ 로드맵

react-creme은 지난 몇 개월 동안 개발 중이며 현재 알파 단계입니다. 앞으로 몇 주 안에 lib가 베타 단계로 전환될 것으로 예상합니다.

의견/피드백을 자유롭게 추가하십시오. 좋아하는 것, 좋아하지 않는 것, 개선할 수 있는 것.

이 게시물이 마음에 드셨다면 제가 만든 다른 것들도 마음에 드실 것입니다Github.

⭐ Star this project on Github

📃 react-creme doc site