NOTE: This package working with React 18. If you used a version 16.x or 17.x, install antd-notifications-messages@1.5.6.
Obtain a behavior equal to the notifications and messages found in the great Ant-Design library, credit for this libraries. demo here
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.
Install from:
npm install antd-notifications-messages
or
yarn add antd-notifications-messages
for React 16.x and 17.x.
npm install antd-notifications-messages@1.5.6
or
yarn add antd-notifications-messages@1.5.6
import css in first file to project
index.js
import 'antd-notifications-messages/lib/styles/style.css';
Now use the API.
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>
);
}
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>
);
}
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>
);
}
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 |
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. |
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>
);
};
const render = ({
message,
icon,
type,
id,
onRemove,
className,
style,
closable,
onClick
}) => {
return (
<div style={style} className={className} onClick={onClick}>
<p>{message}</p>
</div>
);
};
Create with Love ❤️ by Kevin Rivas.