logoMogu Design

⌘ K
  • Design
  • Development
  • Components
  • Components Overview
  • General
    • Button
    • Icon
    • Typography
  • Layout
    • Divider
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
  • Other
    • Affix
    • App
    • ConfigProvider
    • FloatButton
    • Watermark
When To Use
Examples
basic
How to use
Basic usage
Sequence with ConfigProvider
Embedded usage scenarios (if not necessary, try not to do nesting)
Global scene (redux scene)
API
App

App

AffixConfigProvider

Application wrapper for some global usages.

When To Use

  • Provide reset styles based on .ant-app element.
  • You could use static methods of message/notification/Modal form useApp without put contextHolder mannully.

Examples

How to use

Basic usage

App provides upstream and downstream method calls through Context, because useApp needs to be used as a subcomponent, we recommend encapsulating App at the top level in the application.

import { App } from 'mogud';
import React from 'react';


const MyPage: React.FC = () => {
  const { message, notification, modal } = App.useApp();
  message.success('Good!');
  notification.info({ message: 'Good' });
  modal.warning({ title: 'Good' });
  // ....
  // other message, notification, modal static function
  return <div>Hello word</div>;
};


const MyApp: React.FC = () => (
  <App>
    <MyPage />
  </App>
);


export default MyApp;

Note: App.useApp must be available under App.

Sequence with ConfigProvider

The App component can only use the token in the ConfigProvider, if you need to use the Token, the ConfigProvider and the App component must appear in pairs.

<ConfigProvider theme={{ ... }}>
  <App>
    ...
  </App>
</ConfigProvider>

Embedded usage scenarios (if not necessary, try not to do nesting)

<App>
  <Space>
    ...
    <App>...</App>
  </Space>
</App>

Global scene (redux scene)

// Entry component
import { App } from 'mogud';
import type { MessageInstance } from 'mogud/es/message/interface';
import type { ModalStaticFunctions } from 'mogud/es/modal/confirm';
import type { NotificationInstance } from 'mogud/es/notification/interface';


let message: MessageInstance;
let notification: NotificationInstance;
let modal: Omit<ModalStaticFunctions, 'warn'>;


export default () => {
  const staticFunction = App.useApp();
  message = staticFunction.message;
  modal = staticFunction.modal;
  notification = staticFunction.notification;
  return null;
};


export { message, notification, modal };
// sub page
import { Button, Space } from 'mogud';
import React from 'react';
import { message } from './store';


export default () => {
  const showMessage = () => {
    message.success('Success!');
  };


  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
    </Space>
  );
};

API

App

PropertyDescriptionTypeDefaultVersion
messageGlobal config for MessageMessageConfig-5.3.0
notificationGlobal config for NotificationNotificationConfig-5.3.0
basic

Static method for message, notification, modal.

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { App, Button, Space } from 'mogud';

// Sub page
const MyPage = () => {
  const { message, modal, notification } = App.useApp();

  const showMessage = () => {
    message.success('Success!');
  };

  const showModal = () => {
    modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  };

  const showNotification = () => {
    notification.info({
      message: `Notification topLeft`,
      description: 'Hello, Ant Design!!',
      placement: 'topLeft',
    });
  };

  return (
    <Space>
      <Button type="primary" onClick={showMessage}>
        Open message
      </Button>
      <Button type="primary" onClick={showModal}>
        Open modal
      </Button>
      <Button type="primary" onClick={showNotification}>
        Open notification
      </Button>
    </Space>
  );
};

// Entry component
export default () => (
  <App>
    <MyPage />
  </App>
);