|
| 1 | +--- |
| 2 | +title: React for Mobile |
| 3 | +description: TDesign Mobile React is a UI component library for React and Mobile application. |
| 4 | +spline: explain |
| 5 | +--- |
| 6 | + |
| 7 | +## Installation |
| 8 | + |
| 9 | +The component library is currently in the Alpha stage and is undergoing rapid iteration. Please pay attention to version changes. |
| 10 | + |
| 11 | +### npm |
| 12 | + |
| 13 | +```bash |
| 14 | +npm i tdesign-mobile-react |
| 15 | +``` |
| 16 | + |
| 17 | +#### unpkg |
| 18 | + |
| 19 | +```html |
| 20 | +<link rel="stylesheet" href="https://unpkg.com/tdesign-mobile-react/dist/tdesign.min.css" /> |
| 21 | +<script src="https://unpkg.com/tdesign-mobile-react/dist/tdesign.min.js"></script> |
| 22 | +``` |
| 23 | + |
| 24 | +> Please note that unpkg usage is not recommended as it will download the entire component library. Production projects will be directly affected by version updates, and may also be affected by the stability of the CDN. |
| 25 | +
|
| 26 | +The package of tdesign-mobile-react provides kinds of bundles, read [the documentation](https://github.com/Tencent/tdesign/blob/main/docs/develop-install.md) for the detail of differences between bundles. |
| 27 | + |
| 28 | +### Usage |
| 29 | + |
| 30 | +With the help of building tools such as `Webpack` or `Rollup` that support tree-shaking features, you can achieve the effect of importing on demand. |
| 31 | + |
| 32 | +```javascript |
| 33 | +import { Button } from 'tdesign-mobile-react'; |
| 34 | +import 'tdesign-mobile-react/es/style/index.css'; // global design variables |
| 35 | +``` |
| 36 | + |
| 37 | +### Customize theme |
| 38 | + |
| 39 | +Since the original styles are written in Less, you need to handle the compilation of Less files yourself (for example, by installing Less and Less-loader). |
| 40 | + |
| 41 | +read [this file](https://github.com/Tencent/tdesign-common/blob/main/style/mobile/_variables.less) fro the complete less variables definition of TDesign. |
| 42 | + |
| 43 | +```javascript |
| 44 | +import { Button } from 'tdesign-mobile-react/esm/'; |
| 45 | +import 'tdesign-mobile-react/esm/style/index.js'; // 少量公共样式 |
| 46 | +``` |
| 47 | + |
| 48 | +to customize theme with vite |
| 49 | + |
| 50 | +```javascript |
| 51 | +// vite.config.js |
| 52 | +export default { |
| 53 | + css: { |
| 54 | + preprocessorOptions: { |
| 55 | + less: { |
| 56 | + modifyVars: { |
| 57 | + '@btn-height-s': '40px', |
| 58 | + }, |
| 59 | + }, |
| 60 | + }, |
| 61 | + }, |
| 62 | +}; |
| 63 | +``` |
| 64 | + |
| 65 | +to customize theme with webpack |
| 66 | + |
| 67 | +```javascript |
| 68 | +// webpack.config.js |
| 69 | +module.exports = { |
| 70 | + rules: [{ |
| 71 | + test: /\.less$/, |
| 72 | + use: [{ |
| 73 | + loader: 'style-loader', |
| 74 | + }, { |
| 75 | + loader: 'css-loader', // translates CSS into CommonJS |
| 76 | + }, { |
| 77 | + loader: 'less-loader', // compiles Less to CSS |
| 78 | ++ options: { |
| 79 | ++ lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。 |
| 80 | ++ modifyVars: { |
| 81 | ++ '@btn-height-s': '40px', |
| 82 | ++ }, |
| 83 | ++ javascriptEnabled: true, |
| 84 | ++ }, |
| 85 | ++ }, |
| 86 | + }], |
| 87 | + }], |
| 88 | +} |
| 89 | +``` |
| 90 | + |
| 91 | +### How to use React with Next.js |
| 92 | + |
| 93 | +`Next.js` does not support importing `css` style files by default. But the `es` bundle of tdesign-mobile-react automatically includes the corresponding css style file, which causes errors in the project. To solve this, we have provided a set of style-free component library codes stored in the `lib` bundle. |
| 94 | + |
| 95 | +When using Next.js, you need to adjust how you use these components. |
| 96 | + |
| 97 | +```js |
| 98 | +'use client' |
| 99 | + |
| 100 | +import { Button } from 'tdesign-mobile-react/lib/'; |
| 101 | +import 'tdesign-mobile-react/dist/tdesign.css'; |
| 102 | +``` |
| 103 | + |
| 104 | +In addition, the code exported by the `lib` package is written in `es6` and is located in the `node_modules`. It will be skipped by Webpack during compilation, and you need to configure it in `next.config.js` |
| 105 | + |
| 106 | +```js |
| 107 | +const nextConfig = { |
| 108 | + experimental: { |
| 109 | + transpilePackages: ['tdesign-mobile-react'], |
| 110 | + }, |
| 111 | +}; |
| 112 | + |
| 113 | +module.exports = nextConfig; |
| 114 | +``` |
| 115 | + |
| 116 | +## Browser Support |
| 117 | + |
| 118 | +| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Safari | |
| 119 | +| -- | -- | -- | -- | |
| 120 | +| >= 84 | >= 83 | >= 84 | >= 14.1 | |
0 commit comments