Notistack 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Notistack 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Notistack 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript TypeScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 罗奇奇
适用人群 未知
收录时间 2021-12-22

软件简介

Notstack 是一个通知库,使得网络应用程序上显示通知变得非常容易。它是高度可定制的,可以让通知框堆叠在彼此的顶部。

堆叠行为 达到 maxSnack 时关闭最旧的(此处设置为 3)

如何使用

1:将应用程序包装在 SnackbarProvider 组件中:(有关可用道具的完整列表,请参阅API 参考)

注意:如果使用的是 material-ui ThemeProvider,请确保 SnackbarProvider 是它的子项。

import { SnackbarProvider } from 'notistack';

<SnackbarProvider>
    <MyApp />
</SnackbarProvider>

2:使用 withSnackbar 导出任何需要发送通知的组件。这样做可以访问两种方法 enqueueSnackbar 和closeSnackbar,前者可用于发送 snackbar。

import { withSnackbar } from 'notistack';

class MyComponent extends Component {
    handleConnectionLoss = () => {
        this.key = this.props.enqueueSnackbar('You're offline.');
    };

    handleBackOnline = () => {
        this.props.closeSnackbar(this.key);
    };

    render() {
        //...
    };
}

export default withSnackbar(MyComponent);

2(替代):也可以在功能组件中使用 useSnackbar hook。

import { useSnackbar } from 'notistack';

const MyButton = () => {
    const { enqueueSnackbar, closeSnackbar } = useSnackbar();

    const handleClick = () => {
        enqueueSnackbar('I love hooks');
    };

    return (
        <Button onClick={handleClick}>Show snackbar</Button>
    );
}

enqueueSnackbar:将 snackbar 添加到要显示给用户的队列中。它接受两个参数消息和一个选项对象,并返回一个键,用于稍后引用该 snackbar(例如以编程方式关闭它)。

const key = this.props.enqueueSnackbar(message, options)

closeSnackbar:使用给定的键关闭 snackbar,可以通过不向此功能传递键来立即关闭所有 snackbar。

// dismiss all open snackbars
this.props.closeSnackbar()

// dismiss a specific snackbar
this.props.closeSnackbar(key)

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
2 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部