内置包清单 | ArcBlock

React

支持官方 react 中的所有 exports

import React, { lazy, forwardRef, ... } from '@blocklet/pages-kit/builtin/react'

React Router DOM

支持官方 react-router-dom 中所有的 exports

import { useNavigate, ... } from '@blocklet/pages-kit/builtin/react-router-dom';

MUI

MaterialUI

Material UI components - Material UI

import {
  Alert,
  AlertTitle,
  Autocomplete,
  Avatar,
  Box,
  Button,
  ButtonGroup,
  Card,
  CardActionArea,
  CardActions,
  CardContent,
  CardHeader,
  CardMedia,
  CircularProgress,
  ClickAwayListener,
  Collapse,
  Container,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  Divider,
  Fade,
  GlobalStyles,
  Grid,
  Grow,
  LinearProgress,
  Link,
  List,
  ListItem,
  ListItemAvatar,
  ListItemButton,
  ListItemIcon,
  ListItemSecondaryAction,
  ListSubheader,
  Menu,
  MenuItem,
  MenuList,
  Paper,
  Popper,
  Select,
  Slide,
  Stack,
  Switch,
  TextField,
  ThemeProvider,
  Tooltip,
  Typography,
  Zoom,
  alpha,
  createTheme,
  styled,
  useMediaQuery,
  useTheme,
} from '@blocklet/pages-kit/builtin/mui/material';

Lab

import { LoadingButton } from '@blocklet/pages-kit/builtin/mui/lab';

styled

⚠️注意：暂不支持 styled.div，请使用 styled('div')

import { styled } from '@blocklet/pages-kit/builtin/mui/material'

const Div = styled('div')`
  width: 100px;
  height: 100px;
  background-color: red;
`

Emotion

css

import { css } from '@blocklet/pages-kit/builtin/emotion/css';

Iconify

@iconify/react

import { Icon } from '@blocklet/pages-kit/builtin/iconify/react';

React Hook Form

支持官方 react-hook-form 中所有的 exports

React Hook Form - performant, flexible and extensible form library

import { useForm, ... } from '@blocklet/pages-kit/builtin/react-hook-form';

React Wrap Balancer

GitHub - shuding/react-wrap-balancer: Simple React Component That Makes Titles More Readable

import Balancer, { Provider } from '@blocklet/pages-kit/builtin/react-wrap-balancer';

Zustand

zustand GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

import { create, ... } from '@blocklet/pages-kit/builtin/zustand';

immer middleware

import { immer } from '@blocklet/pages-kit/builtin/zustand/middleware/immer';

Stream

import { EventSourceParserStream } from '@blocklet/pages-kit/builtin/stream';

Session

import { useSessionContext } from '@blocklet/pages-kit/builtin/session';

Locale

import { useLocaleContext } from '@blocklet/pages-kit/builtin/locale';

Call

import { call } from '@blocklet/pages-kit/builtin/call';

Utils

import { joinURL, withQuery, getQuery, getComponentMountPoint } from '@blocklet/pages-kit/builtin/utils';

React Scroll To Bottom

⚠️：这是异步导出的，需要使用 React.lazy 引用组件

import ScrollToBottomAsync from '@blocklet/pages-kit/builtin/async/react-scroll-to-bottom';

const ScrollToBottom = React.lazy(() => ScrollToBottomAsync);

ArcBlock UX

import { RelativeTime, DID } from '@blocklet/pages-kit/builtin/arcblock/ux';

Builtin Components

import { LanguageField } from '@blocklet/pages-kit/builtin/components';