Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@uiw/react-notify
Advanced tools
全局展示通知提醒信息。
import { Notify } from 'uiw';
// or
import Notify from '@uiw/react-notify';
import { Button, Notify } from 'uiw';
const Demo = () => {
return (
<div>
<Button
onClick={() => {
Notify.open({ title: '打开通知', description: '最简单的用法,4.5 秒后自动关闭,没有状态颜色图标。' });
}}
>
打开通知
</Button>
<Button
type="success"
onClick={() => {
Notify.success({ title: '成功通知', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
成功通知
</Button>
<Button
type="warning"
onClick={() => {
Notify.warning({
title: '警告通知',
description: '这是一个警告通知,最简单的用法,4.5 秒后自动关闭。'
});
}}
>
警告通知
</Button>
<Button
type="primary"
onClick={() => {
Notify.info({ title: '说明通知', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
说明通知
</Button>
<Button
type="danger"
onClick={() => {
Notify.error({ title: '错误通知', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
错误通知
</Button>
</div>
);
}
ReactDOM.render(<Demo />, _mount_);
import { MonthPicker, Button, Notify } from 'uiw';
const Demo = () => {
return (
<div>
<Button
onClick={() => {
Notify.success({ placement: 'topLeft', title: '成功通知', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
↖上左弹出通知
</Button>
<Button
onClick={() => {
Notify.warning({
placement: 'topRight',
title: '警告通知',
description: '最简单的用法,4.5 秒后自动关闭。',
onClose: () => {
console.log('~~~~>')
}
});
}}
>
↗上右弹出通知
</Button>
<Button
onClick={() => {
Notify.info({ placement: 'bottomLeft', title: '说明通知', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
↙下左弹出通知
</Button>
<Button
onClick={() => {
Notify.error({ placement: 'bottomRight', title: '错误通知', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
↘下右通知
</Button>
</div>
);
}
ReactDOM.render(<Demo />, _mount_);
import { Button, Notify } from 'uiw';
const Demo = () => {
return (
<div>
<Button
onClick={() => {
Notify.success({
placement: 'topRight',
title: '警告通知',
duration: null,
description: '最简单的用法,弹出通知不消失。'
});
}}
>
↗上右弹出通知
</Button>
</div>
);
}
ReactDOM.render(<Demo />, _mount_);
import { Button, Notify } from 'uiw';
const Demo = () => {
return (
<div>
<Button
onClick={() => {
Notify.warning({
placement: 'topRight',
duration: null,
description: '标题不展示,可以通过关闭按钮关闭。',
});
}}
>
↗上右弹出通知
</Button>
<Button
onClick={() => {
Notify.info({ placement: 'bottomLeft', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
↙下左弹出通知
</Button>
<Button
onClick={() => {
Notify.error({ placement: 'bottomRight', description: '最简单的用法,4.5 秒后自动关闭。' });
}}
>
↘下右通知
</Button>
</div>
);
}
ReactDOM.render(<Demo />, _mount_);
import { Button, Notify } from 'uiw';
const Demo = () => {
return (
<div>
<Button
onClick={() => {
Notify.warning({
placement: 'topRight',
duration: null,
title: '警告通知,最简单的用法,只展示标题,点击按钮关闭。',
});
}}
>
↗上右弹出通知
</Button>
</div>
);
}
ReactDOM.render(<Demo />, _mount_);
import { Button, Notify } from 'uiw';
const Demo = () => {
return (
<div>
<Button
onClick={() => {
Notify.error({ placement: 'bottomRight', icon: null, description: '最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。' });
}}
>
↘下右通知
</Button>
<Button
onClick={() => {
Notify.success({
placement: 'topRight',
title: '警告通知',
icon: null,
duration: null,
description: '最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。最简单的用法,4.5 秒后自动关闭。'
});
}}
>
↗上右弹出通知
</Button>
</div>
);
}
ReactDOM.render(<Demo />, _mount_);
Notify.open(config);
Notify.success(config);
Notify.warning(config);
Notify.info(config);
Notify.error(config);
参数 config
如下:
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 通知提醒标题,必选 | String/ReactNode | ReactNode |
icon | 设置为 false 将不显示图标 | String/ReactNode | ReactNode |
description | 通知提醒内容,必选 | String/ReactNode | ReactNode |
duration | 默认 4.5 秒后自动关闭,配置为 null 则不自动关闭 | Number | 4.5 |
placement | 弹出位置,可选 | Enum{topLeft , topRight , bottomLeft , bottomRight } | topRight |
onClose | 当提醒关闭时的回调函数 | Function | none |
更多属性文档请参考 <Alert>
。
FAQs
Notify component
We found that @uiw/react-notify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.