Have ideas to improve npm?Join in the discussion! »

    gc-components

    0.1.0 • Public • Published

    gc-components

    React组件库 Docs

    安装

    1. 使用 npm 安装(推荐)
    npm install gc-components
    
    1. 浏览器安装(不推荐)

    在浏览器中使用 scriptlink 标签直接引入文件,并使用全局变量 gc
    npm 发布包内的 dist 目录下提供了 gc-components.min.jsgc-components.min.css

    注意:必须实现引入 reactreact-dom 资源文件。

    使用

    1. ES 模块使用(推荐)
    import { Button } from 'gc-components';
    ReactDOM.render(<Button>测试按钮</Button>, mountNode);
    

    引入样式

    import 'gc-components/dist/gc-components.min.css;
    

    注意:gc-components 不会自动引入组件样式,需要手动引入 cssless 文件

    1. 浏览器使用(不推荐)

    引入样式

    <link rel="stylesheet" href="{path}/gc-components.min.css">
    

    引入组件库

    <script src="{path}/gc-components.min.js"></script>
    

    组件库提供了全局变量 gc ,可通过 <gc.Component /> 使用

    ReactDOM.render(<gc.Button>测试按钮</gc.Button>, mountNode);
    

    按需加载

    注意:gc-components 默认支持基于 ES module 的 tree shaking,不使用以下插件也会有按需加载的效果。

    使用 babel-plugin-import 插件

    // .babelrc or babel-loader option
    "plugins": [
        [
            "import",
            {
                "libraryName": "gc-components",
                "libraryDirectory": "es", // "es" | "lib"
                "style": "css"            // "css" | true
            }
        ]
    ]
    

    这里要注意 style 属性:

    • style: true 表示从 style/index.less 加载样式
    • style: 'css' 表示从 style/index.css 加载样式

    引入插件后从 gc-components 引入模块

    import { Button } from 'gc-components';
    

    babel-plugin-import 会自动编译为

    import { Button } from 'gc-components';
    import 'gc-components/es/button/style/css';
    // import 'gc-components/es/button/style'
    

    从而实现组件和样式的按需加载,无需手动引入样式。

    待解决

    1. Checkbox 中使用 useImperativeHandleforwardRef 后,在 CheckboxGroup 中报错
    Warning: Expected useImperativeHandle() first argument to either be a ref callback or React.createRef() object. Instead received: an object with keys {}.
    
    Uncaught TypeError: Cannot add property current, object is not extensible
    

    临时处理:Checkbox 组件暂时移除了对 useImperativeHandleforwardRef 的使用

    开发中...

    • Icon
    • Button
    • Checkbox
    • Radio
    • Tooltip
    • Popup
    • Divider
    • Input
    • Switch
    • Upload
    • Select
    • Tag
    • Tabs
    • Toast
    • Message

    Install

    npm i gc-components

    DownloadsWeekly Downloads

    0

    Version

    0.1.0

    License

    ISC

    Unpacked Size

    3.42 MB

    Total Files

    244

    Last publish

    Collaborators

    • avatar