A simple but flexible implementation of toast style notifications for React extracted from customize-easy-ui-component.
View the demo and documentation.
Install react-toastnotes
, using yarn or npm.
yarn add react-toastnotes
import toaster from "react-toastnotes";
//import "react-toastnotes/src/styles.css"; // optional styles
const HelloWorld = () => (
<button
onClick={() => {
toaster.notify("Hello world", {
duration: 2000
});
}}
>
Say hello
</button>
);
The notify function accepts either a string, a react node, or a render callback.
// using a string
toaster.notify("With a simple string");
// using jsx
toaster.notify(<div>Hi there</div>);
// using a render callback
toaster.notify(({ onClose }) => (
<div>
<span>My custom toaster</span>
<button onClick={onClose}>Close me please</button>
</div>
));
It also accepts options.
toaster.notify("Hello world", {
position: "bottom-left", // top-left, top, top-right, bottom-left, bottom, bottom-right
duration: null // This notification will not automatically close
});
One downside to the current API is that render callbacks and custom nodes won't get access to any application context, such as theming variables provided by styled-components. To ensure that render callbacks have access to the necessary context, you'll need to supply that context to the callback.
const CustomNotification = ({ title }) => {
const theme = useTheme();
return <div style={{ color: theme.primary }}>{title}</div>;
};
const CustomNotificationWithTheme = withTheme(CustomNotification);
toaster.notify(() => <CustomNotificationWithTheme title="I am pretty" />);
MIT
Way back, this was originally based on the wonderful implementation of notifications in evergreen.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。