react全局消息弹出框组件

v1.0
用法
1 注入

function MyApp({ Component, pageProps }: AppProps) {
   
    return (
        <ThemeProvider>
            <MessageBar />
            <GlobalStyle />
            <Component {...pageProps} />
        </ThemeProvider>
    );
}
1
2
3
4
5
6
7
8
9
10

2 任何位置调用方法 可传入组件或字符串 和显示时长

useEffect(() => {
    if (enter) {
        showMessage(<strong>点击屏幕开始浏览！</strong>, 1000);
    }
}, [enter]);
1
2
3
4
5

组件代码

/*
 * @Author: hongbin
 * @Date: 2022-09-16 20:24:16
 * @LastEditors: hongbin
 * @LastEditTime: 2022-09-16 20:58:06
 * @Description:消息条
 */
import { createRef, FC, useCallback, useImperativeHandle, useRef, useState } from "react";
import styled from "styled-components";

interface IShowMessage {
    (
        /**
         * 提示信息
         */
        message: string | JSX.Element,
        /**
         * 持续时间 默认 300ms
         */
        duration?: number
    ): void;
}

interface MessageBarRef {
    showMessage: IShowMessage;
}

const ref = createRef<MessageBarRef>();

export const showMessage: IShowMessage = (...rest) => {
    ref.current?.showMessage(...rest);
    console.log(ref.current);
};

const opacityDuration = 300;

interface IProps {}

const MessageBar: FC<IProps> = () => {
    const [isShow, _setIsShow] = useState(false);
    const [message, _setMessage] = useState<Parameters<IShowMessage>[0]>("message");
    const timer = useRef<NodeJS.Timeout>();

    const showMessage: MessageBarRef["showMessage"] = useCallback((msg, duration = 300) => {
        clearTimeout(timer.current);
        _setIsShow(true);
        _setMessage(msg);
        timer.current = setTimeout(() => {
            _setIsShow(false);
            //不算显示消息条时间
        }, duration + opacityDuration);
    }, []);

    useImperativeHandle(
        ref,
        () => ({
            showMessage,
        }),
        [showMessage]
    );

    return <Container isShow={isShow}>{message}</Container>;
};

export default MessageBar;

const Container = styled.div<{ isShow: boolean }>`
    position: fixed;
    top: 10vh;
    left: 50vw;
    transform: translateX(-50%);
    background: #00000077;
    color: #fff;
    padding: 1vmin 1vmax;
    border-radius: 0.5vmin;
    letter-spacing: 1px;
    box-shadow: 3px 4px 12px 0px #0000008c;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-property: opacity, visibility;
    transition-duration: ${opacityDuration / 1000}s;
    opacity: ${({ isShow }) => +isShow};
    visibility: ${({ isShow }) => (isShow ? "visible" : "hidden")};
    z-index: 99999999;
    user-select: none;
`;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88