m78 v1.0.0-beta.96

🎉Introduction

一套 react 基础库，包含常用组件、hooks、以及其他工具。查看文档

✨Features

• 完全使用hooks编写。
• 设计风格上采用antd与material混搭, 基础样式兼容antd, 可作为其的补充组件库使用。
• 大部分组件都进行了大小屏处理，移动端/PC 端均可用
• 使用 TypeScript 开发，包含完整的类型声明。
• 标准化接口，size/value/defaultValue/onChange/color 等很多配置与社区大部分组件保持一致，学习成本更低。
• 贴近前台业务，相比其他为中后台设计的组件库可能会更适用于前台。

📦Install

yarn add m78
# or
npm install m78

📘Usage

导入组件

M78 使用 es modules 模块，你可以通过m78/* 来导入主包下的各个模块

import Button, { ButtonProps } from 'm78/button';

function App() {
  return (
    <div>
      <Button>click</Button>
    </div>
  );
}

💡 默认是没有主入口的，所有组件都在独立的模块中维护, 这样可以做到天然的按需加载，tree shake 也更友好。

打包组件目录支持使用babel-plugin-import, 不过不推荐, 一是对这样对 idea 和 ts 来说很怪异，支持不好；二是，组件通常会包含多个命名导出，如 import Form, { Item, Title, Footer, FormProps } from 'M78/form'， 直接导入会更复合直觉。

样式

样式采用后编译(开发时编译), 你需要为你的webpack或其他打包器添加scss文件支持才能正常使用。

如果要自定义主题色和其他样式变量，可以通过webpack配置sass-loader的prependData选项，并导入自定义的变量文件, 步骤如下:

1. 自定义 sass 变量

// custom.scss
@import '~@lxjx/sass-base/var/index.scss';

// 主题色更改为红色
$color: red;

// 自定义信息色
$color-info: blue;
$color-success: green;
$color-error: red;
$color-warn: yellow;

更多变量请查看var.scss

2. 修改webpack -> sass-loader配置(也可以跳过此步，在每个 sass 文件顶部自行引入)

// 你的webpack配置文件.js (每个脚手架配置方式可能会有所不同，请自行查阅)
{
  prependData: '@import "@/[文件路径]/custom.scss;',
}

🎄 其他

还没想到.jpg