Community Quality Material
This is a collection of various quality materials contributed by the community at Taro Material Market.
Note: Platform Support does not hit ✔️, meaning it has not been verified, does not mean it is not supported at all.
How to contribute
All developers are welcome to contribute materials to the Taro community. The following steps can be taken to contribute, attract traffic, discuss and grow together.
- Submit materials to the Taro Materials Marketplace and provide complete documentation.
- Modify this document to add a description for the material.
- Add a discussion to the Taro Discussion Group to communicate with developers.
Template Project
NetEase cloud music mini program
React
🎉NetEase cloud music mini program based on Taro + Taro UI + Redux + React Hooks + Typescript.
@lsqy 【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
nice-router-taro
React
nice-router, Front-end mini program development framework for back-end programmers.
@kala888 【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Xiaoxili Bloglet mini program
React
Xiaoxili Bloglet mini program, Based on Taro 3.3+ and developed using HTML tags.
@shenghanqin 【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Mortgage Calculator
React
The First Taro 3 Multi-Ended Unified Instance - Support React Native，Weapp，H5。
58 Tongcheng team produces.【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ |
《Rick and Morty》Wiki
React
A multi-end unified project based on Taro 3.2+. Here you can view almost all the characters that appear in Rick and Morty, plus mini-games just for the hardcore fans.
【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ |
South Song Culture e-ticket sales mini program
React
E-ticket (attractions, restaurants, nightclubs) sales mini program based on Taro 3.0.27, using React + React Hooks + TypeScript + React-Redux.
@sskcal produce. 【Material Details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Daily workload of WeChat mini program
Vue
Record daily workload, count daily payroll, monthly payroll.
@whyour. 【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
niceup
React
This is a group buying WeChat mini program specially developed for self-publishers.
@nasawz 【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
taro-mall
React
Taro_Mall is a multi-end open source online mall application, the backend is based on litemall, the front end is written using the Taro framework, now all completed mini programs and H5 mobile, the subsequent will be adapted to APP, Taobao, headlines, Baidu mini program. taro_Mall has completed all the functions of the front end of litemall.
@jiechud【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Vue3 + TS Rapid development of templates
Vue3
Rapid development templates based on Taro 3.x & Vue 3 & TypeScript.
@RealCoolSnow 【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
React + Dva + Less Template
React
This is a template based on Taro 3.x. - DvaJS - Taro - Less - React。
@hocgin【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
elf-taro
React
Taro 小程序 脚手架 (Taro 3 + Dva + Typescript + Immer) - 内置 Redux 计数器, 异步数据请求 与 腾讯小程序地图 demo。
@didilinkin【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
taro-kit
React
Taro mini program Scaffolding (Taro 3 + Dva + Typescript + Immer) - Built-in Redux counter, asynchronous data request and Tencent mini program map demo.
@wsdo【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Style Library
NutUI
Vue3
Vue component library for multi-platform development
@jdf2e【Official Website】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ |
taro-ui-vue
Vue
Vue implementation of Taro UI.
@psaren【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ |
taro-ui-vue3
Vue3
Taro UI component library rewritten in Vue 3.0.
@b2nil【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Taroify
React
Taroify is the Taro version of the mobile component library Vant. Both are based on the same visual specification and provide a consistent API interface to help developers quickly build mini program.
@tangzhi【Material details】【Gitee】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-color-ui
React
This project encapsulates some common components based on ColorUI, so there is no need to download the ColorUI demo to see the classname of various implementations and reduce a series of tedious work such as manually rewriting the wxml writing format in the demo to Taro jsx format.
@Gengar-666【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ |
Plugin
Skeleton screen plugin
Make your Taro3 page more smooth, Taro page initialization setData() need to pass a relatively large data, resulting in the initialization of the page will be a period of white screen time, this plugin can solve this problem.
@allen-hu-666【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ |
tailwindcss Plugin
Taro is connected to the tailwindcss 2.0 plugin.
@pcdotfan【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Dynamic code loading plugin
React
Dynamic loading code implementation on the mini program side based on Taro 3.0+, webpack plugins, babel.
@JiyuShao【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Command line creation of components/page plugins
Taro page/component creation tool, all using functional components + Typescript + Hooks, providing good page hints.
@liuhuapiaoyuan【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Compatible with wsl plugins
Packaged content (rsync) synchronized to Windows file, solve the problem that the packaged mini program file under wsl2 (\\wsl$`) cannot be read directly from the development tool.
@toknT【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Component
Virtual List
React
The virtual list component based on Taro3 package supports unequal height of list sub-nodes, lower white screen rate than the official one, better performance, easy to use and simple.
Produced by the Ctrip team.【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Product two-way linkage list
React
The function is not affected by the layout position and content data, all by the JS dynamic calculation of the product two-way linkage list obtained.
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Drop down filter menu
React
Mall, group buying common drop-down filter menu, support up to 3 levels of submenu, support multi-select / single-select filter.
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Sweepstakes Plugin
React & Vue
🍧🍧🍧 taro-based [carousel / nine-box] sweepstakes plugin, 🎨 prizes / text / images / colors / buttons are configurable, supports synchronous / asynchronous sweepstakes, 🎯 probability front / back end controllable, can be adapted to mobile with rpx.
@LuckDraw【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ |
Calendar Heat Map
React
Based on Taro's calendar heat map, it generates a graph similar to the GitHub Contribution statistics.
@Mayandev【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Curved progress bar
React
Curved progress bar, single template.
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Handwritten Signature
React
Taro's handwritten signature library.
@yz1311【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Date and time selection component
React
Based on pickerView, pickerViewColumn from the definition of a selector for the date and time in a component to select the completion . The project uses the Taro framework , you can also implement a time picker similar to the WeChat reminder.
@jarbozhang【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
wPicker
React
Date, time, multi-level linkage picker。
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Time Picker
React
Time Picker.
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Date picker
Vue
The use of vue development, business needs a selection of date interval components, can only be combined with others to get a manual, part of the function has not been completely tuned, there is time to refine
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Multifunctional Form Components
React
Taro3, React-based multi-functional form component for WeChat mini program side.
@qxtang【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
echarts-taro3-react
React
WeChat mini program echarts component built on Taro3.x version.
@Cecilxx【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
echarts-taro3-vue
Vue
Taro3.x-Vue echarts component for WeChat mini program.
@Cecilxx【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
taro3-react-f2
React
Taro3 Integrated Chart Library f2。
@tomalloc【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ |
Tool Library
taro-iconfont-cli
Use iconfont icons in the Taro framework, font-independent, with multi-color support.
@fwh1990【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Long List Solution
React
Taro framework long list of solutions : integrated drop-down refresh , skeleton screen , infinite scroll , lazy loading of images.
@Rahim-Chan【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ |
tarojs-router-next
Taro mini program routing library / automatic generation of routing methods with parameter type hints / allows passing parameter data of any type and any size / synchronized routing method calls / koa experience consistent routing middleware.
@lblblong【Material details】【Github】
vue-taro-router
Vue
Based on Taro, extended to vue-router experience. Support route interception, event callback, chain call. Method types are: push, replace, goBack, etc.
@kaeryehaowan【Material details】【Github】
Easy Taro Router
React & Vue
Anyone who has used the umi framework will be impressed by its protocol-based routing. Through a series of configurations, you can implement a similar "protocol-based routing" feature in your Taro mini program.
@LuckyHH【Material details】【Github】
PreQuest
A library of mini program requests.
@xdoer【Material details】【Github】
taro-storage
Extend taro's storage, support local storage set expiration date, support clear expired local storage.
@JosnLee【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ |
Baidu Voice
React
Very lightweight voice synthesis interface, generally used for voice broadcast of pushed messages.
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
Other
Form visualization editing
React
Visual form editor developed with Taro3, supporting H5, mini program (in development), and apps (in development), which can be integrated into your own front-end projects for form building or inherited to the back-end user form editor Online Preview. https://form.t.platelet.xyz/。
@ShaoGongBra【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
taro-mobx-logger
React
Get more friendly state debugging for developing WeChat mini program with Taro + Mobx.
@kevin-zeus【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
@better-mini/logger
React
Mini program real debugging/preview Logger component, support output log to the screen for viewing, improve debugging efficiency. At present, only WeChat and Alipay are fully tested, other ends may not be supported.
@Fay98de【Material details】【Github】
| Ali | Baidu | ByteDance | H5 | RN | ||
|---|---|---|---|---|---|---|
| Support | ✔️ | ✔️ |