Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@benlai/nutui-react-taro

jdf2e323MIT1.0.1TypeScript support: included

京东风格的轻量级移动端 React 组件库,支持一套代码生成 H5 和小程序

nutui, nutui2, nutui3, react, nutui-react, webpack, react component, vite, jdc, jdcfe, taro

readme

logo

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

PRs Welcome license GitHub contributors GitHub Release Date GitHub commit activity

NutUI-React   NutUI-React


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
npm install

# Start development
npm 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
npm install

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

# OR run as jd mini-program
# dir:src/sites/mobile-taro/dist/jd
npm 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

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.

contributors

Stargazers

Stargazers repo roster for @jdf2e/nutui-react

Forkers

Forkers repo roster for @jdf2e/nutui-react

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

changelog

v2.0.0-alpha.14

2023-06-02

  • 🛠 refactor: barrage (#1072) @junjun666
  • 🛠 refactor: popover (#1060) @junjun666
  • 🛠 refactor: sidenavbar (#1057) @oasis-cloud
  • :bug: fix(backtop): 修改 demo (#1083) @Eiinu
  • :bug: fix: ellipsis 在 taro 构建的 H5 中偶现无法暂时省略号的情况 (#1076) @oasis-cloud
  • :bug: fix: input 组件忽略 maxlength 和 password 属性 (#1079) @oasis-cloud
  • :bug: fix: menu 的 closeOnClickOverlay 改为 closeOnOverlayClick (#1084) @oasis-cloud
  • :bug: fix: picker 组件渲染的时候触发 onConfirm (#1082) @oasis-cloud
  • 📖 docs(textarea): 更新文档说明 (#1086) @Eiinu
  • 📖 docs: checkbox demo 增加头部 (#1075) @oasis-cloud
  • 📖 docs: 文档中 css 变量表格的文案优化 (#1077) @oasis-cloud

v2.0.0-alpha.13

2023-05-31

  • 🛠 refactor: animatingNumbers (#1048) @拧巴的猫
  • 🛠 refactor: trendArrow (#1066) @拧巴的猫
  • 🛠 refactor: video (#1034) @junjun666
  • 🛠 refactor: watermark (#1071) @Eiinu
  • :sparkles: feat: 构建类型文件中的注释,方便在编辑器中查看属性的说明 (#1068) @oasis-cloud
  • :bug: fix: popup 在 taro 中的动效优化 (#1065) @oasis-cloud
  • :bug: fix: 修改 uploader 和 video 的 taro 文档 (#1070) @junjun666
  • 📖 docs: correct spelling errors (#1058) @konka

v2.0.0-alpha.12

2023-05-26

  • 🛠 refactor: actionSheet (#1053) @xiaoyatong
  • 🛠 refactor: countdown (#1040) @拧巴的猫
  • 🛠 refactor: searchBar (#1047) @xiaoyatong
  • 🛠 refactor: shortPassword (#1046) @Eiinu
  • 🛠 refactor: toast (#1026) @justExplore
  • 🛠 refactor: virtualList (#1056) @Eiinu
  • :sparkles: feat: ellipsis add width attribute (#1038) @Zhu Da Shuai
  • :sparkles: feat: 导出主题中的 CSS 变量类型 (#1050) @oasis-cloud
  • 📖 docs: import touch-emulator (#1045) @oasis-cloud

v2.0.0-alpha.11

2023-05-24

  • 🛠 refactor: collapse (#1027) @Eiinu
  • 🛠 refactor: Skeleton (#1036) @Eiinu
  • :sparkles: feat: 添加土耳其语 (#1028) @manin
  • :bug: fix(fixednav): 修改 onSelect 参数顺序 (#1035) @Eiinu
  • :bug: fix: 修复taro下拉刷新组件偶发未触发canRelease状态时松手,组件不会自动回弹的问题 (#1029) @Z-Bokle
  • 🔨 chore: 增加同步升级文档到 docs 仓库的脚本 (#1044) @oasis-cloud
  • 🔨 chore: 完善组件导出的类型 (#1039) @oasis-cloud
  • 🔨 chore: 构建每个组件的 css 文件 (#1037) @oasis-cloud
  • 📖 docs: 文档 props 标题统一修复 (#1041) @oasis-cloud

v2.0.0-alpha.10

2023-05-19

  • :sparkles: feat(progress): 添加 lazy、delay 属性 (#1023) @Eiinu
  • :bug: fix: swiper loop 模式位置计算错误 (#1018) @oasis-cloud
  • 🛠 refactor: imagepreview (#1019) @xiaoyatong
  • 🛠 refactor: noticebar (#1024) @xiaoyatong
  • 🛠 refactor: steps (#1021) @oasis-cloud
  • 📖 docs: icon 文档修订 (#1022) @oasis-cloud

v2.0.0-alpha.9

2023-05-17

  • :sparkles: feat: add create-properties.js (#1001) @Eiinu
  • :sparkles: feat: cascader支持受控 (#1000) @xiaoyatong
  • :sparkles: feat: elevator 支持右侧索引是否展示 (#1006) @拧巴的猫
  • :bug: fix(image): lazy 优化观察对象数量 (#1015) @Eiinu
  • :bug: fix: tabs children 变更后需要展示新的 title (#999) @oasis-cloud
  • :bug: fix: 格式化,删掉某些无用代码 (#1014) @xiaoyatong
  • 🛠 refactor: notify (#983) @拧巴的猫
  • 🛠 refactor: NumberKeyboard (#1012) @Eiinu
  • 🛠 refactor: price (#989) @拧巴的猫
  • 🛠 refactor: pulltorefresh (#1011) @oasis-cloud
  • 🛠 refactor: radio (#1009) @oasis-cloud
  • 🛠 refactor: Range (#991) @Eiinu
  • 🛠 refactor: swiper 重构;indcator 的索引计算改为从 0 开始 (#1008) @oasis-cloud
  • 🔨 chore: autoplay -> autoPlay (#1007) @Eiinu
  • 📖 docs(tabbar): update description (#1004) @Eiinu

v2.0.0-alpha.8

2023-05-12

  • :sparkles:feat: cascader支持受控 (#1000) @xiaoyatong
  • :bug: fix: tabs children 变更后需要展示新的 title (#999) @oasis-cloud
  • 🛠 refactor: Range (#991) @Eiinu

v2.0.0-alpha.7

2023-05-12

  • :bug: fix: tabs children 变化需要更新选中状态 @oasis-cloud

v2.0.0-alpha.6

2023-05-12

  • 🛠 refactor: cascader (#993) @xiaoyatong
  • 🛠 refactor: picker (#975) @xiaoyatong
  • 🛠 refactor: table (#982) @xiaoyatong
  • 🛠 refactor: TextArea (#979) @Eiinu
  • :bug: fix: image src 初始状态未空,导致出发加载失败事件 (#988) @oasis-cloud
  • 📖 docs(progress): demo 代码更新 (#986) @Eiinu
  • 📖 docs(progress): update demo (#987) @Eiinu
  • 📖 docs: tabs 文档中的 titleNode 修改为 title (#995) @oasis-cloud
  • 🔨 chore: taro es 构建移入 vite 配置文件 (#990) @oasis-cloud

v2.0.0-alpha.5

2023-05-10

  • 🛠 refactor: checkbox (#974) @oasis-cloud
  • 🛠 refactor: circleprogress-v2.0 (#949) @junjun666
  • 🛠 refactor: ellipsis-v2.0 (#963) @junjun666
  • 🛠 refactor: empty-v2.0 (#977) @junjun666
  • 🛠 refactor: swipe (#958) @justExplore
  • 🛠 refactor:avatar-v2.0 (#970) @junjun666
  • 📖 docs: 增加 icon 的复制功能 (#973) @oasis-cloud
  • :sparkles: feat: cellgroup组件增加单元格之间是否展示分割线props (#961) @拧巴的猫
  • :bug: fix: tabbar 通过 Tabbar.Item 方式使用未加载 item 的样式 (#972) @oasis-cloud
  • :bug: fix: 修复elevator小程序快速滑动后闪动问题 (#984) @拧巴的猫

v2.0.0-alpha.4

2023-05-05

  • 🛠 refactor: circleprogress-v2.0 (#949) @junjun666
  • 🛠 refactor: input (#962) @oasis-cloud
  • 🛠 refactor: Tabbar (#935) @Eiinu
  • :bug: fix: badge 组件的默认样式中,去掉 margin-right (#967) @xiaoyatong
  • 🎨 style: fix endLine display error (#964) @HaiTao

v2.0.0-alpha.3

2023-04-28

  • :bug: fix: overlay 属性 onClick 暴露、lockscroll 相关demo 修订 (#959) @xiaoyatong
  • :bug: fix: 修改taro增加主题编译 (#950) @junjun666
  • 🛠 refactor: dialog (#945) @xiaoyatong
  • 🛠 refactor: switch (#941) @拧巴的猫
  • 🛠 refactor: tabs (#939) @oasis-cloud
  • 🔨 chore: website 2.0 (#955) @oasis-cloud
  • 📖 docs: button 文档表格优化 (#956) @oasis-cloud

v2.0.0-alpha.2

2023-04-26

  • 🛠 refactor: navbar (#890) @拧巴的猫
  • 🛠 refactor: animate (#940) @junjun666
  • 🛠 refactor: badge (#936) @xiaoyatong
  • 🛠 refactor: drag (#937) @拧巴的猫
  • 🛠 refactor: elevator (#927) @拧巴的猫
  • 🛠 refactor: menu (#923) @oasis-cloud
  • 🛠 refactor: progress (#943) @Eiinu
  • 🔨 chore: sync pnpm-lock @oasis-cloud
  • :bug: fix: 修改taro增加主题编译 (#950) @junjun666

v2.0.0-alpha.1

2023-04-21

  • 🔨 chore: markdown 中 props、css variables 类型和默认值增加代码标识 @oasis-cloud
  • 🛠 refactor: Audio (#930) @eiinu
  • 🛠 refactor: layout (#934) @oasis-cloud
  • 🛠 refactor: popup 2.0 (#929) @xiaoyatong
  • 🛠 refactor: uploader (#902) @junjun666

v2.0.0-alpha.0

2023-04-20

  • 🛠 refactor: backtop (#912) @eiinu
  • 🛠 refactor: button (#904) @oasis-cloud
  • 🛠 refactor: cell (#876) @拧巴的猫
  • 🛠 refactor: divider (#891) @junjun666
  • 🛠 refactor: fixednav (#865) @eiinu
  • 🛠 refactor: grid (#882) @eiinu
  • 🛠 refactor: image (#892) @oasis-cloud
  • 🛠 refactor: indicator (#893) @xiaoyatong
  • 🛠 refactor: inputnumber (#888) @junjun666
  • 🛠 refactor: overlay (#886) @junjun666
  • 🛠 refactor: pagination (#861) @eiinu
  • 🛠 refactor: Rate (#894) @eiinu
  • 🛠 refactor: sticky (#906) @oasis-cloud

v1.x

GitHub 查看 1.x 的 Change Log。