Comments (9)
Yes! I think toast.warning()
and toast.info()
would be nice defaults. I'll see what I can do.
from react-hot-toast.
Is there any updates on this please?
from react-hot-toast.
Hey, @timolins is this up for grab? I'd be happy to implement it :)
from react-hot-toast.
@danqing @timolins @hibangun @maciekgrzybek
import type { Toast, ToasterProps } from 'react-hot-toast';
export type Options = Partial<Pick<Toast, "icon" | "duration" | "ariaProps" | "className" | "style" | "position" | "iconTheme">> | undefined;
export const info: Options = {
icon: <svg>...</svg>,
iconTheme: {
primary: '..',
secondary: '...',
}
}
export const warning: Options = {
icon: <svg>..</svg>,
iconTheme: {
primary: '..',
secondary: '...',
}
}
export const customToast = Object.assign(toast, {
info: (message: Message, opts?: Options) => toast(message, { ...opts, ...info }),
warning: (message: Message, opts?: Options) => toast(message, { ...opts, ...warning }),
});
from react-hot-toast.
Adding to that, shall we include some documentation on how to define your own custom toast types? @timolins Also thanks for the great library 👍
from react-hot-toast.
I would also be interested in having those two!
I already have a custom Toaster component where I map the type to our app theme styles for each case (success/error/warning/info), I am just missing the toast
methods to call now :).
from react-hot-toast.
Me too ooo! @rlenoir-codepoint
from react-hot-toast.
@rlenoir-codepoint could you please share on how you implement custom taster component for each cases (success/error/warning/info)? :)
from react-hot-toast.
@rlenoir-codepoint could you please share on how you implement custom taster component for each cases (success/error/warning/info)? :)
@hibangun I followed the documentation by extending the ToastBar
API, see https://react-hot-toast.com/docs/toast-bar.
In a nutshell:
import { Toast, ToastBar, Toaster } from 'react-hot-toast';
type ToastNotificationType = {
type: Toast['type'] | 'warning' | 'info';
// warning + info might be added in future https://github.com/timolins/react-hot-toast/issues/29
};
<Toaster>
{t => {
// Mapping the toast notification type to the theme styles
const getTypeStyleProps = (type: ToastNotificationType['type']) => {
//
let props = {};
switch (type) {
case 'success':
props = {
color: 'emerald-900',
borderColor: 'emerald-300',
backgroundColor: 'emerald-100',
};
break;
case 'error':
props = {
color: 'red-900',
borderColor: 'red-300',
backgroundColor: 'red-100',
};
break;
case 'warning':
props = {
color: 'amber-900',
borderColor: 'amber-300',
backgroundColor: 'amber-100',
};
break;
case 'info':
props = {
color: 'blue-900',
borderColor: 'blue-300',
backgroundColor: 'blue-100',
};
break;
default:
props = {};
break;
}
return props;
};
return (
<ToastBar {...props} toast={t}>
{({ icon, message }) => (
<StyledToast {...getTypeStyleProps(t.type)}>
...
</StyledToast>
)}
</ToastBar>
);
}}
</Toaster>
from react-hot-toast.
Related Issues (20)
- Custom output direction HOT 1
- Support loading with "mask"
- Element type Error when using with nextjs and redux-toolkit
- Accessibility
- (Suggestion) Enhancing Web Accessibility
- Add delay to toast
- Feature Requests for warning and max toast
- Toast persists after page navigation HOT 1
- Support popover api
- Dismiss a headless toast? HOT 4
- how to support center-center? HOT 2
- TypeError: Failed to set an indexed property [0] on 'CSSStyleDeclaration': Indexed property setter is not supported.
- Linear gradient background HOT 1
- onClick event on toast.error/toast.success Icon
- Trouble with className HOT 1
- [BUG] Crashed when an element with id `target` exists HOT 2
- Cannot set textAlign
- Resolved promise unnecessarily and indefinitely maintains loading state
- Toast resides below top layer element like <dialog> when triggered from them HOT 1
- Website is down!!! HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hot-toast.