shopee-ui-react

EDS React

A set of UI components written with React.

🔩 Install

npm install shopee-ui-react

🔰 Quick Start

// 全局引入
import * as ShopeeUI from 'shopee-ui-react/dist/shopee-ui-react.min.js';
import 'shopee-ui-react/lib/theme-default/index.css';
// 类型引入
import { ButtonProps } from 'shopee-ui-react';
or
import { ButtonProps } from 'shopee-ui-react/es/components/button/types';
// 按需加载
import { Button } from 'shopee-ui-react';
import 'shopee-ui-react/es/theme-default/components/button/index.css';
// EDS默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'shopee-ui-react' 就会有按需加载的效果。

也可以使用 babel-plugin-import 来实现按需加载

// .babelrc.js
module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'shopee-ui-react',
        libraryDirectory: 'es/components',
        customStyleName: (component) => `shopee-ui-react/es/theme-default/components/${component}/index.css`
      }
    ]
  ]
}

// babel-plugin-import 会帮助你加载 JS 和 CSS
import { Button } from 'shopee-ui-react';
      ↓ ↓ ↓ ↓ ↓ ↓ ↓
import Button from 'shopee-ui-react/es/components/button';
import 'shopee-ui-react/es/theme-default/components/button/index.css'

🤝 Contributing

Read our contributing guide.