@redshank/notifications-messages
v2.0.3
Published
Notification for Reactjs based in ant-design notifications and messages, with zero dependencies
Downloads
5
Maintainers
Readme
antd-notifications-messages
NOTE: This package working with React 18. If you used a version 16.x or 17.x, install [email protected].
Obtain a behavior equal to the notifications and messages found in the great Ant-Design library, credit for this libraries. demo here
Why to use?
Sometimes you probably have a mini project or you just don't need to install the whole antd package to simply use notifications or messages.
How to install
Install from:
npm install antd-notifications-messages
or
yarn add antd-notifications-messages
for React 16.x and 17.x.
npm install [email protected]
or
yarn add [email protected]
How to use:
import css in first file to project
index.js
import 'antd-notifications-messages/lib/styles/style.css';
Now use the API.
Notifications
import { notification } from 'antd-notifications-messages';
function App() {
const show = (type) => {
notification({
type,
title: 'This is a Title',
message: `This is a notification type ${type}`
});
};
return (
<div>
<button onClick={() => show('success')}>Success</button>
<button onClick={() => show('info')}>Info</button>
<button onClick={() => show('warning')}>Warning</button>
<button onClick={() => show('error')}>Error</button>
</div>
);
}
Message
import { message } from 'antd-notifications-messages';
function App() {
const show = (type) => {
message({
type,
message: `This is a notification type ${type}`
});
};
return (
<div>
<button onClick={() => show('success')}>Success</button>
<button onClick={() => show('info')}>Info</button>
<button onClick={() => show('warning')}>Warning</button>
<button onClick={() => show('error')}>Error</button>
</div>
);
}
Custom render
For more api props definition Message Render Props or Notification Render Props
import { message, notification } from 'antd-notifications-messages';
function App() {
const showMessage = (type) => {
message({
type,
message: 'The custom Render',
render: ({ message, style, className, icon }) => {
return (
<div style={{ ...style, background: 'black' }} className={className}>
<p style={{ color: 'white', display: 'flex' }}>
<span>{icon}</span>
<b> {message}</b>
</p>
</div>
);
}
});
};
const showNotification = (type) => {
notification({
type,
title: 'The title',
message: 'The custom Render',
render: ({ message, style, className, icon, title }) => {
return (
<div style={{ ...style, background: 'black' }} className={className}>
<h5 style={{ color: 'white' }}>
<span>{icon}</span> {title}
</h5>
<p style={{ color: 'white' }}>
<b>{message}</b>
</p>
</div>
);
}
});
};
return (
<div>
<button onClick={() => showMessage('success')}>Message custom</button>
<button onClick={() => showNotification('info')}>
Notification custom
</button>
</div>
);
}
Notification Props
| prop | type | default | description | | :------: | ------ | :--------: | :-----------------------------------------------------------------------------------------------------------------------------: | | title | string | "" | Required. Title of notification | | message | string | "" | Required. Message of notification | | type | enum | "success" | Optional. defines the type of notification. "success", "info", "warning", "error" | | position | enum | "topRight" | Optional. defines the position of notification. "topRight", "topLeft", "topCenter", "bottomRight", "bottomLeft", "bottomCenter" | | duration | number | 7000 | Optional. Defines the time that the notification will be active on the screen |
Message Props
| prop | type | default | description | | :------: | ---------------- | :---------: | :-----------------------------------------------------------------------------------------------------------------------------: | | message | string | "" | Required. Message of notification | | type | enum | "success" | Optional. defines the type of notification. "success", "info", "warning", "error" | | position | enum | "topCenter" | Optional. defines the position of notification. "topRight", "topLeft", "topCenter", "bottomRight", "bottomLeft", "bottomCenter" | | duration | number | 7000 | Optional. Defines the time that the notification will be active on the screen | | key | number or string | - | Optional. Message key, useful to update the message. |
Notification Render
const render = ({
title,
message,
icon,
type,
id,
onRemove,
className,
style,
onClick
}) => {
return (
<div style={style} className={className} onClick={onClick}>
<h5>{title}</h5>
<p>{message}</p>
</div>
);
};
Message Render
const render = ({
message,
icon,
type,
id,
onRemove,
className,
style,
closable,
onClick
}) => {
return (
<div style={style} className={className} onClick={onClick}>
<p>{message}</p>
</div>
);
};
Credits
Create with Love ❤️ by Kevin Rivas.