NutUI-React Adaptation for Taro: Enabling Multi‑Platform Mini‑Program Development

NutUI is a lightweight JD‑style mobile component library that supports Vue and React; to meet growing demand for React in mini‑programs, the team accelerated NutUI‑React’s multi‑platform adaptation using Taro as the underlying framework.

Based on Taro v3.5 (which brings Webpack 5, React 18, etc.), the adaptation upgraded React from 17 to 18, covered more than 60 components, and released a dedicated npm package @nutui/nutui-react-taro with updated documentation.

The work was organized into three stages: (1) research, script creation, and publishing adaptation documents; (2) component‑by‑component adaptation, addressing issues such as DOM element queries, SASS variable handling, and native capability wrappers; (3) upgrading to Taro 3.5.x, fixing configuration and dependency problems.

Key technical solutions include using Taro’s @tarojs/plugin-html to bridge Web components, providing utility functions like getRect and getRectByTaro for element measurements, and handling SASS loops for responsive layouts. Example snippets: export const getRect = (element) => { if (element && element.getBoundingClientRect) { return element.getBoundingClientRect(); } }; export const getRectByTaro = async (element) => { const res = await element.getBoundingClientRect(); return res; };

For developers, two onboarding paths are offered: (a) add the library to an existing project with npm i @nutui/nutui-react-taro and import components, or (b) start a new Taro project using the built‑in NutUI‑React template via npm install -g @tarojs/cli and taro init myApp . Sample usage code is provided in the article.

The team plans continuous weekly releases to address remaining limitations, improve interactions and animations, and invites the community to contribute via GitHub discussions and the JD developer group.