message

Component giúp hiển thị thông báo nhưng được gọi thông qua hàm.

Ví dụ

export const MessageDemo: FC = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button
        onClick={() => {
          setCount(count + 1);
          message.push({
            placement: 'top-center',
            content: ({ onClose, progress }) => (
              <div style={{ padding: 10, margin: 3, background: '#fff' }}>
                Hello, World! {count}
                <button onClick={onClose}>Close</button>
                <div style={{ width: `${progress}%`, height: 3, background: 'red' }} />
              </div>
            ),
          });
        }}
      >
        Message
      </button>
      <button
        onClick={() => {
          setCount(count + 1);
          message.push({
            content: <div style={{ padding: 10, margin: 3, background: '#fff' }}>Hello, World 2! {count}</div>,
            placement: 'bottom-end',
            animationType: 'fade-right',
          });
        }}
      >
        Message 2
      </button>
    </div>
  );
};

Options

Name	Type	Default	Description
content	PreactNode	-	Nội dung của message
placement	'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end'	'top-center'	Vị trí hiển thị của message
duration	number	3000	Thời gian tồn tại của message
animationType	'fade' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right'	'fade-down'	Loại hiệu ứng của message
maxCount	number	-	Số lượng message tối đa hiển thị
space	MessageSpace	'md'	Khoảng cách của wrapper các message