React Components

English | 简体中文

A modern, customizable React UI component library.

Features

• 🔧 TypeScript Support - Full type definitions included
• 🎨 Customizable Themes - Support for multiple theme modes including dark mode
• 📦 On-Demand Loading - Import components individually to optimize bundle size
• 🌈 Style Isolation - SCSS modules for style management
• 🧩 Rich Components - Various commonly used components like Button with multiple sizes and states
• 📚 Storybook Documentation - Comprehensive component examples and docs

Installation

Ensure the following dependencies are installed in your project:

• react: >= 16.8.0
• react-dom: >= 16.8.0
• classnames: >= 2.5.1

# Using npm
npm install react-components

# Using yarn
yarn add react-components

Quick Start

import React from 'react';
import { Button } from 'react-components';
import 'react-components/dist/es/styles/index.css'; // Import styles

const App = () => (
  <Button size="large" theme="primary">
    Click Me
  </Button>
);

export default App;

Custom Themes

The component library supports theme customization. You can use the provided variables file:

// Import variables
@use 'react-components/dist/es/styles/_variables.scss' as *;

// Customize variables
$primary-color: #1890ff;

Development Guide

This quick guide will help you set up the project in your local development environment.

System Requirements

• Node.js: >= 20.10.0

After installing Node.js, you'll need to install the yarn package manager:

npm install -g yarn

Install Dependencies

yarn install

Script Commands

The project includes several commonly used scripts that can be executed from the project root.

Start Project

yarn start

This command launches the development server. Access the project at http://localhost:6006 in your browser.

Build Project

To build the final component library, run:

yarn build

To build the documentation site for the component library, run:

yarn build:storybook

Unit Testing

yarn test

This command runs unit tests once. You can also start test watch mode:

yarn test:watch

Check Dependency Updates

yarn ncu

This command checks for new versions of third-party dependencies. Update dependencies with:

yarn ncu -u

This updates dependencies in package.json to their latest versions. Before updating, ensure major version updates won't break the project.

After updating dependencies, run yarn install to install the latest versions.

Tech Stack

• React
• TypeScript
• SCSS
• Rollup
• Storybook
• Jest

Happy coding ;-)