Skip to content

Commit

Permalink
Update (#220)
Browse files Browse the repository at this point in the history
  • Loading branch information
@emilkowalski
emilkowalski authored Nov 5, 2023
1 parent 2d7ba3e commit efa3a6e
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 18 deletions.
4 changes: 2 additions & 2 deletions src/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -361,7 +361,7 @@ const Toast = (props: ToastProps) => {
<button
data-button
data-cancel
style={cancelButtonStyle}
style={toast.cancelButtonStyle || cancelButtonStyle}
onClick={() => {
if (!dismissible) return;
deleteToast();
Expand All @@ -376,7 +376,7 @@ const Toast = (props: ToastProps) => {
{toast.action ? (
<button
data-button=""
style={actionButtonStyle}
style={toast.actionButtonStyle || actionButtonStyle}
onClick={(event) => {
toast.action?.onClick(event);
if (event.defaultPrevented) return;
Expand Down
3 changes: 3 additions & 0 deletions src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,9 @@ html[dir='rtl'],
border: none;
cursor: pointer;
outline: none;
display: flex;
align-items: center;
flex-shrink: 0;
transition: opacity 400ms, box-shadow 200ms;
}

Expand Down
2 changes: 2 additions & 0 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ export interface ToastT {
onDismiss?: (toast: ToastT) => void;
onAutoClose?: (toast: ToastT) => void;
promise?: PromiseT;
cancelButtonStyle?: React.CSSProperties;
actionButtonStyle?: React.CSSProperties;
style?: React.CSSProperties;
unstyled?: boolean;
className?: string;
Expand Down
34 changes: 18 additions & 16 deletions website/src/pages/toast.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,19 +170,21 @@ toast.dismiss();

## API Reference

| Property | Description | Default |
| :---------- | :----------------------------------------------------------------------------------------------------: | -------------: |
| description | Toast's description, renders underneath the title. | `-` |
| closeButton | Adds a close button which shows on hover. | `false` |
| invert | Dark toast in light mode and vice versa. | `false` |
| important | Control the sensitivity of the toast for screen readers | `false` |
| duration | Time in milliseconds that should elapse before automatically closing the toast. | `4000` |
| position | Position of the toast. | `bottom-right` |
| dismissible | If `false`, it'll prevent the user from dismissing the toast. | `true` |
| icon | Icon displayed in front of toast's text, aligned vertically. | `-` |
| action | Renders a primary button, clicking it will close the toast. | `-` |
| cancel | Renders a secondary button, clicking it will close the toast. | `-` |
| id | Custom id for the toast. | `-` |
| onDismiss | The function gets called when either the close button is clicked, or the toast is swiped. | `-` |
| onAutoClose | Function that gets called when the toast disappears automatically after it's timeout (duration` prop). | `-` |
| unstyled | Removes the default styling, which allows for easier customization. | `false` |
| Property | Description | Default |
| :----------------- | :----------------------------------------------------------------------------------------------------: | -------------: |
| description | Toast's description, renders underneath the title. | `-` |
| closeButton | Adds a close button which shows on hover. | `false` |
| invert | Dark toast in light mode and vice versa. | `false` |
| important | Control the sensitivity of the toast for screen readers | `false` |
| duration | Time in milliseconds that should elapse before automatically closing the toast. | `4000` |
| position | Position of the toast. | `bottom-right` |
| dismissible | If `false`, it'll prevent the user from dismissing the toast. | `true` |
| icon | Icon displayed in front of toast's text, aligned vertically. | `-` |
| action | Renders a primary button, clicking it will close the toast. | `-` |
| cancel | Renders a secondary button, clicking it will close the toast. | `-` |
| id | Custom id for the toast. | `-` |
| onDismiss | The function gets called when either the close button is clicked, or the toast is swiped. | `-` |
| onAutoClose | Function that gets called when the toast disappears automatically after it's timeout (duration` prop). | `-` |
| unstyled | Removes the default styling, which allows for easier customization. | `false` |
| actionButtonStyles | Styles for the action button | `{}` |
| cancelButtonStyles | Styles for the cancel button | `{}` |

1 comment on commit efa3a6e

@vercel
Copy link

@vercel vercel bot commented on efa3a6e Nov 5, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sonner – ./

sonner-git-main-emilkowalski-s-team.vercel.app
sonner-emilkowalski-s-team.vercel.app
sonner-toast.vercel.app
sonner.emilkowal.ski

Please sign in to comment.