Tango UI

Notice

A succinct message that is displayed temporarily.

Use in React 19

In the React 19, you need to configure NoticeProvider in the entry file to enable global notification functionality.

index.jsx configuration demoApp.jsx / main.jsx

import React from 'react';
import { NoticeProvider } from "tango-ui-cw"; // add here
import App from './App';

function Index() {
  return (
    <NoticeProvider> // add here
      <App />
    </NoticeProvider> // add here
  );
}

export default Index;

Once configured, it can be used in any child component of the application. useNotice() hook。

Success

PreviewCode

Caution

PreviewCode

Fail

PreviewCode

Material Design

PreviewCode

Props

Universal Props

Prop	Type	Accepted Values	Description	Default	Version
message	ReactNode	-	Notification content	-	-
variant	string	default \| md	The Material Design style can be enabled, and the notification pop-up window is located in the lower left corner.	default	md >= 0.4.7
method	function	success() \| fail() \| caution()	Notification type method. Determines icon/color and is triggered via useNotice().	-	-

On This Page

Notice

Props