jdf2e / nutui-react

京东风格的移动端 React 组件库 、支持多端小程序(A React UI Toolkit for Mobile Web)

JD-style mobile UI components based on React that support users to develop H5 and mini-programs.

 

---

Nut[nʌt]: the one Squirrel Scrat pursues resolutely for a lifetime and will never let go even if it causes a catastrophe from the animated film Ice Age.

简体中文 | English

Features

• 🚀 70+ High Quality Components
• 📖 Based on JD APP 11.0 Visual Specifications
• 🍭 Support Tree Shaking
• 📖 Extensive Documentation and Demos
• 💪 Written in TypeScript
• 💪 Support SSR (Experimental)
• 🍭 Support Custom Themes
• 🍭 90%+ Unit Test Coverage
• 📖 Provide Sketch Design Resources

Running locally

running with H5

# Clone repository
git clone https://github.com/jdf2e/nutui-react.git

# Enter the project dictionary
cd nutui-react

# Install dependencies
pnpm install

# Start development
pnpm run dev

# visit in browser: http：http://localhost:3000 (you don't have to open it manually if you've run it in the browser again)

running with mini-program

# Clone repository
git clone https://github.com/jdf2e/nutui-react.git

# Enter the project dictionary
cd nutui-react

# Install dependencies
pnpm install

# Start development
# dir：src/sites/mobile-taro/dist/weapp
pnpm run dev:taro:weapp

# OR run as jd mini-program
# dir：src/sites/mobile-taro/dist/jd
pnpm run dev:taro:jd

Build Versions

If you are using AMD environment or build tools such as Webpack, Vite, etc., we recommend using the es version. If it is a non-module environment (such as direct reference through the <script> tag), it is recommended to use the umd compressed version.

• es nutui.es.js

• umd nutui.umd.js

Links

• Discussions (vote with 👍)
• Feature Requests (vote with 👍)
• Bugs (vote with 👍)
• Question (vote with 👍)

Communication

Version	WeChat Group	JD Dongdong Group
NutUI React	Reply 「NutUI-React」 after following	1025679314
NutUI x Taro	Reply 「NutUI-React」 after following	1022545110

Join Us

NutUI Community

Welcome To NutUI-React Community

Contribute to NutUI

There are some choices of contributing to NutUI as follows, solving issues, fixing bugs, adding new components, i18n, UI customization, platform and cross-end adaptation, etc.

You are very welcome to contribute code to NutUI. Before your pull requests, please read NutUI Developer Contributing Guide。

Issue & Discussion

Report issues to NutUI

It is highly recommended to read [How To Ask Questions The Smart Way](https://github.com/ryanhanwu/, How To Ask Questions Of GitHub Community and How to Report Bugs Effectively, then you can get understanding and help more easily.

NutUI Discussion

If you have any ideas, questions or suggestions, you can share your opinions here.

Contributors

Thanks to all the following developers。 who have contributed code to NutUI.

Stargazers

Forkers

Milestones

Milestones

Release Notes

NutUI follows Angular Style Commit Message Conventions. The up-to-date release notes are available on Release

Open Source License

This project is based on MIT protocol

nutui-react's Issues

textarea 字数显示有问题

辅助平面的单个字符长度显示为 2 了。

支持taro

我看vue版本是支持taro的，react版本后期会支持taro吗

<Address />组件无法动态设置city

请问可以支持Taro3.x吗

嘻嘻

TextArea组件placeholder属性设置不生效

请问什么时候可以支持react-native

请问什么时候可以支持react-native啊，感谢🙏

报了一些警告 prop iconClassPrefix spell it as lowercase `iconclassprefix`

React does not recognize the iconClassPrefix prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase iconclassprefix instead. If you accidentally passed it from a parent component, remove it from the DOM element

请问目前的稳定版不支持react18吗？

使用最新的taro模板是react18，安装1.2.2的nutui，报错invalid hook

Infiniteloading 组件数据量大时渲染会卡吗？

Input组件border未处理

您好，使用中发现CollapseItem组件没有根据属性变化更新视图，请求修复

能支持react-native吗？

能支持react-native吗？如果不行，后面会有计划搞一套吗？

react nutui component textarea bind Value not work

example:
const [content, setContent] = useState('')

<TextArea className='textarea' defaultValue={content} onChange={(e) => { console.log('e', e) }} limitShow maxlength='20' /> change value 123 console.log('content', content) => ''

提个建议，希望采纳

现在移动端react库还比较匮乏，真心希望能支持taro，reactnative

期待能在taro中使用，已star，比trao-ui好看组建更多

期待能在taro中使用，已star，比trao-ui好看组建更多

Input 组件文档待完善

目前支持的是 vue 的吧。

您好，我们希望可以在next中使用，但目前引入组件报错，请求支持一下next环境的使用场景

dialog弹窗组件自定义的关闭按钮，关闭后页面还是被锁住

`
<div className="close-btn" onClick={() => setVisible(false)}>

`

解释一下，相当于关闭弹窗功能和页面的锁定class取消被分成了两个事件。导致关闭了弹窗但是消除锁定class没有生效。

@nutui/[email protected] 在taro上使用有问题可以看一下吗

可以在taro 中使用吗

根据条件动态渲染不同页面时出现页面不停刷新 抖动的情况

不确定是不是我自己的开发问题，因为刚开始学习和使用react四天时间，还有些生疏，问题是这样的
在渲染列表页的时候，根据不同的情况，如果列表没有数据，则渲染，否则渲染正常的
在return（）里使用了{!bool && } ,bool = useState, MyEmpty自定义，{bool&&}，同样MyCard自定义，
此时在 MyCard 里面有一个 元素，例如，在获取change事件后，更新 useState时，会不停的重新渲染整个页面，此时页面会出现抖动的情况，如果将MyCard里的元素全部直接写到return（）里，则不会出现此情况。
问题就是这样，感谢大佬们的支持。

官网 babel 按需加载例子缺少 引入 sass varibale

问题

nutui-react 官网「快速上手」一节介绍 WebPack 构建工具 通过 babel 使用按需加载 有误
仅配置 babel-plugin-import 无法正常运行

报错如下

Failed to compile.

SassError: Undefined variable.
  ╷
5 │   width: $icon-width;
  │          ^^^^^^^^^^^
  ╵
  node_modules/@nutui/nutui-react/dist/packages/icon/icon.scss 5:10  root stylesheet
ERROR in ./node_modules/@nutui/nutui-react/dist/packages/icon/icon.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./node_modules/@nutui/nutui-react/dist/packages/icon/icon.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
5 │   width: $icon-width;
  │          ^^^^^^^^^^^
  ╵
  node_modules/@nutui/nutui-react/dist/packages/icon/icon.scss 5:10  root stylesheet

后续发现，@nutui/nutui-react 导出的 sass 文件包含 sass variable 但是未引入对应 sass variable 文件，实际配置还需要借助 sass-resources-loader 全局导入 sass variable 文件

可复现demo

https://stackblitz.com/edit/webpack-webpack-js-org-bmddyc

Infiniteloading里的loadMore方法，当props更新的时候，loadMore方法取不到最新的props值，需要第二次执行才能取到。

const refreshLoadMore = (done: () => void) => {
setTimeout(() => {
const { newValue } = props; // 假设这个newValue 是该父组件传过来的值，且中途有修改。则需要执行到第二次refreshLoadMore ，newValue 才能取到修改之后的值
const curLen = refreshList.length
for (let i = curLen; i < curLen + 10; i++) {
refreshList.push(${i})
}
if (refreshList.length >= 30) {
setRefreshHasMore(false)
} else {
setRefreshList([...refreshList])
}
done()
}, 500)
}

日历组件bug

往下拉着拉着就会出现一大片白的

请问taro版本具体什么时间可以发布

@xiaoyatong 感谢！

好久出taro 小程序版本啊

radio组件取消选中问题

radio组件取消选中后，选中结果没有清空

Calendar 开始时间无效

Calendar 开始时间无效

packages.json

代码：

结果：（无法向上滚动，查看更多数据）

Upload 组件上传失败时希望可以自定义是否显示图片

需求：
上传失败时不希望展示图片，包括关闭按钮

calendar组件，日期范围选择

选择区间日期的时候，选择日期后，再选择这个日期前的日期，会出现文字错位。比如先选5.27 再选5.20

希望支持小程序

目前该组件支持H5，希望支同时支持小程序和H5开发。

请问什么时候可以支持taro?

请问什么时候可以支持taro?
谢谢

Infiniteloading 组件 pullTxt、loadTxt 和 loadMoreTxt 参数无效

pullTxt、loadTxt、loadMoreTxt属性设置了都无效，还是显示的默认文字，代码如下：

npm run dev 时报错

npm run dev 时报错

Big integer literals are not available in the configured target environment ("chrome87", "edge88", "es2019", "firefox78", "safari13.1")

dialog弹窗组件希望增加点击弹窗本身抛出事件

dialog弹窗组件希望增加点击弹窗本身抛出事件

`<Dialog
title="组件调用"
visible={visible1}
onOk={() => setVisible1(false)}
onCancel={() => setVisible1(false)}
onClick={()=>{}}

如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。

`

Dialog、Popup、ActionSheet等有蒙层的组件，在部分Android设备，蒙层不显示

目前测试发现小米11、oppo  find x3、vivo x20不显示，复现机型算比较多

怎么贡献代码呢？

终于可以 all in react 了，感谢各位大佬！

react 在手机端的最大问题就是没有一个能打的 UI 库，这下完美了 ❤️

希望每个组件的Props类型能export出去

在原组件上进行业务组件开发时，需要继承原组件的props类型，没法直接通过
import { Icon, IconProps } from '@nutui/nutui-react'

目前只能通过

type IconProps = typeof Icon.defaultProps

这样不友好的方便来获取，感觉代码不够美观

npm run build 报错

npm run build 报错

Popup 组件体验问题

1. 没有设置最大宽度/高度
2. 调整x号样式，需要修改的属性太多，建议优化。

按官方的教程，在taro里报错

按官方的教程，在taro里报错：

Upload 上传非图片格式时期望增加自定义图片的配置

Upload 默认使用时（非自定义）如果上传非图片格式，显示一片空白，查看源码，只有上传图片才显示img标签。

期望上传 pdf/word/ppt 等格式的文件时，能自定义配置要展示的默认图片，需要暴漏出一个 props。

nutui-react支持小程序吗？

@nutui/nutui-react 基于React 视觉风格 JD APP 7.0规范 ，只能开发 h5

React17中SearchBar 显示错乱

在taro中使用提示"export 'createRoot' (imported as 'ReactDOM') was not found in 'react-dom'

希望可以处理input框boder

处理input框在fouces状态下boder做一个处理

希望能出一个Form组件？

Form组件在日常使用中比较常用，希望能出一个Form组件。感谢大佬！

Infiniteloading 组件，点击列表项有时候会触发 refresh 事件，而不是触发绑定在列表项上的点击事件

Swipper组件指示器默认样式无法变更

指示器的背景色无法设置。