mxdi9i7 / vant-react

Lightweight 2kb Mobile UI Components built on React and TS, inspired by Vant@https://github.com/youzan/vant

Vant React

Lightweight Mobile UI Components built on Typescript and React in under 2kb!

Features

• Support Typescript
• 60+ Reusable components
• 100% Storybook coverage: https://vant.bctc.io
• Extensive documentation and demos

Install

# Using npm
npm i vant-react -S

# Using yarn
yarn add vant-react

Quickstart

import React from 'react';
import { Button } from 'vant-react';
import 'vant-react/dist/index.css';

const App = () => {
    return (
        <Button text='Hello World' />
    );
};

Components completion status

Basic Components

• Button
• Cell
• Icon
• Image
• Layout
• Popup
• Built-in style
• Toast

Form Components

• Calendar
• Cascader
• Checkbox
• DatetimePicker
• Field
• Form
• NumberKeyboard
• PasswordInput
• Picker
• Radio
• Rate
• Search
• Slider
• Stepper
• Switch
• Uploader

Action Components

• ActionSheet
• Dialog
• DropdownMenu
• Loading
• Notify
• Overlay
• PullRefresh
• ShareSheet
• SwipeCell

Display Components

• Badge
• Circle
• Collapse
• CountDown
• Divider
• Empty
• ImagePreview
• Lazyload
• List
• NoticeBar
• Popover
• Progress
• Skeleton
• Steps
• Sticky
• Swipe
• Tag

Navigation Components

• Grid
• IndexBar
• NavBar
• Pagination
• Sidebar
• Tab
• Tabbar
• TreeSelect

Business Components

• AddressEdit
• AddressList
• Area
• Card
• ContactCard
• ContactEdit
• ContactList
• Coupon
• GoodsAction
• SubmitBar
• Sku

Deprecated

• SwitchCell
• Panel

Contribution

If you like what we do, please consider buy us a bubble-tea(donate)!

Please make sure to read the Contributing Guide before making a pull request.

Or, join our discussion group on Wechat by adding me!

Browser Support

Modern browsers and Android 4.0+, iOS 8.0+.

Open Source License

This is an Open Source Software operating under the MIT License.

vant-react's Issues

field type=password 的时候可以切换密码显示还是隐藏吗

是否有像vant-cli一样的react版的脚手架

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Remove internal state in all input components

We are currently managing input state in 2 places, the parent component as well as the input component itself.

To keep 1 single source of truth and avoid bugs like #83. We need to remove all internal state in input components and force users to manage input states themselves using parent's component.

Acceptance criteria:
All input components' states need to be managed from the outside, there should be no side-effect inside the component that could alter the input state.

Mark

万分期待，万众瞩目，万分感谢！

文档中关于popup的size属性错了，最新代码是传入的{width: xx, height: xx}对象

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Why don't use yarn to manage package?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

该组件库支持哪些小程序

这个库支持哪些小程序，是只支持微信小程序吗

一些个人建议

无意中看到这个项目，react在移动端确实很薄弱， 能有这个项目确实很不错， 以下是一些个人建议：

文档：目前demo跟文档完全是脱离的，建议直接使用dumi之类的来构建文档， 同时可以直接展示demo。

按需引入：不需要再引入一个index.css;

组件基础：antd的底层是react-component, 移动端应该是可以直接使用一部分的；

最后， 感谢大家的开发

测试slack integration

1.2.1版本中上传图片使用的参数是file.path，升级到1.6.2参数变成了file.url导致所有上传图片异常

这个仓库不再维护了吗? 呜呜呜.

啥时候搞完呢大佬？

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

npm安装报错

npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "_@[email protected]@@babel": name cannot start with an underscore; name can only contain URL-friendly characters

没轮播组件 swiper吗？

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Checkbox component doesn't work with prop `checked = true`.

Describe the bug
Checkbox component doesn't work with prop checked = true.

<Checkbox checked={true} labelText='Basic Usage' />

version vant-react: v0.2.7

文档中Field组件onChange事件未更新，目前是旧的input事件

version 0.3.1