npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@arco-design/mobile-react

v2.33.0

Published

Follow the steps below to quickly get started using the component library.

Downloads

2,102

Readme

Quick Start

Follow the steps below to quickly get started using the component library.

========

Installation

npm install @arco-design/mobile-react -S

Project Dependencies

"peerDependencies": {
    "react": ">=16.9.0",
    "react-dom": ">=16.9.0",
    "react-transition-group": ">=4.3.0"
}

Self-adaptation

The style uses rem for self-adaptation (@base-font-size: 50px). Please make sure that the project has introduced flexible.js or other tool functions that can set the basic font size for html according to the screen size. You can also import flexible.js provided in this component library:

import setRootPixel from '@arco-design/mobile-react/tools/flexible';

setRootPixel();

If the baseFontSize is different, you can change the incoming parameters and change the @base-font-size variable:

// js
/**
 * @param baseFontSize Baseline fontSize of 1rem, default 50
 * @param sketchWidth Width of UI draft, default 375
 * @param maxFontSize Maximum fontSize limit, default 64
 * @return {() => void} removeRootPixel Cancel the baseFontSize setting and remove the resize listener
 */
setRootPixel(37.5);

// less options
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@base-font-size': 37.5,
    }
}

Import with CDN

You can import CDN resources through the <script> tag. Note that you need to import the CDN resources of peerDependencies first.

React & ReactDOM: Click here

React Transition Group: Click here

<link ref="stylesheet" href="https://unpkg.com/@arco-design/[email protected]/dist/style.min.css">
<script src="https://unpkg.com/@arco-design/[email protected]/dist/index.min.js"></script>

Full import

Note that style files need to be imported manually.

import Arco from '@arco-design/mobile-react';
import '@arco-design/mobile-react/esm/style';

Partial import (Recommended)

It is recommended to use babel-plugin-import to import. (Click here to get more flexible configuration of this plugin):

npm install babel-plugin-import -D

Import components on demand

.babelrc.js:

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
        "style": (path) => `${path}/style`,
    }]
]

Import icons on demand

.babelrc.js:

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false,
    }]
]

If both component and Icon need to be imported on demand, you need to add a different name value to the third parameter.

plugins: [
    ["import", {
        "libraryName": "@arco-design/mobile-react",
        "libraryDirectory": "esm", // In SSR environment, you need to use `cjs` here
        "style": (path) => `${path}/style`
    }, "@arco-design/mobile-react"],
    ["import", {
        "libraryName": "@arco-design/mobile-react/esm/icon", // In SSR environment, you need to replace `esm` with `cjs`
        "libraryDirectory": "",
        "camel2DashComponentName": false
    }, "@arco-design/mobile-react/esm/icon"]
]

Then you only need to write one line when importing, and it will be loaded on demand instead of completely imported when packaging:

import { Button as ArcoButton } from '@arco-design/mobile-react';

import { IconAsk, IconBack } from '@arco-design/mobile-react/esm/icon';

Partial import(Vite)

It is recommended to use vite-plugin-importer to import(Click here to know more from this plugin):

npm install vite-plugin-importer -D

Import components on demand

vite.config.ts

import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react",
            libraryDirectory: "esm",
            style: (path) => `${path}/style`,
        })
    ]
})

Import icons on demand

vite.config.ts

import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react/esm/icon",
            libraryDirectory: "",
            camel2DashComponentName: false,
        })
    ]
})

If both component and Icon need to be imported on demand, you just declare all and do not need any change.

vite.config.ts

import usePluginImport from 'vite-plugin-importer'

export default defineConfig({
    plugins: [
        usePluginImport({
            libraryName: "@arco-design/mobile-react",
            libraryDirectory: "esm",
            style: (path) => `${path}/style`,
        }),
        usePluginImport({
            libraryName: "@arco-design/mobile-react/esm/icon",
            libraryDirectory: "",
            camel2DashComponentName: false,
        })
    ]
})

Partial import (manual)

If you don't use babel-plugin-import, you need to import js and css files manually. The following example has the same effect as the import statement above:

import ArcoButton from '@arco-design/mobile-react/esm/button';
import '@arco-design/mobile-react/esm/button/style';

import IconAsk from '@arco-design/mobile-react/esm/icon/IconAsk';

Theme variable customization & dynamic switching

This component library uses less and css variables for theme customization. The css variable is mainly used for dynamic theme switching at runtime, and is disabled by default. If there is a need for dynamic theme switching, you can configure less options to enable the css variable:

lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@use-css-vars': 1, // Enable css variables
    }
},

Note that after configuring and enabling css variables, if there is less variable substitution, you need to replace the css variables at the same time:

// less options
lessOptions: {
    javascriptEnabled: true,
    modifyVars: {
        '@base-font-size': 37.5,
        '@primary-color': 'red',
    }
}

// css
:root {
    --base-font-size: 37.5;
    --primary-color: red;
}

Using components on PC

Only touch-related events are monitored and processed in the component. If you need to use the component on the PC side, you can import touch2mouse.js provided by this component library to be compatible with mouse event processing (Note: After importing this file, the following mouse events will be blocked: mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover and mouseup, and the page content cannot be selected):

import '@arco-design/mobile-react/tools/touch2mouse';