A short and simple permissive license with conditions only requiring preservation of copyright and license notices. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
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.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。