diff --git a/README.md b/README.md index 5fc581a..2f2834b 100644 --- a/README.md +++ b/README.md @@ -85,8 +85,9 @@ Toaster component accepts following props: | bgColor | Color of toast background | | textColor | Color of text and close icon | | customComponent | Custom component to render toast | +| position | Position of toast container | -#### Custom component example: +#### Custom component example: ```tsx import { Toaster, toast } from 'poply'; import { CustomToast } from './components/custom-toast'; diff --git a/apps/web/CHANGELOG.md b/apps/web/CHANGELOG.md index 1411ba2..91b43a1 100644 --- a/apps/web/CHANGELOG.md +++ b/apps/web/CHANGELOG.md @@ -1,5 +1,12 @@ # web +## 0.1.8 + +### Patch Changes + +- Updated dependencies + - poply@3.1.5 + ## 0.1.7 ### Patch Changes diff --git a/apps/web/package.json b/apps/web/package.json index 73b874e..e65e68e 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -1,6 +1,6 @@ { "name": "web", - "version": "0.1.7", + "version": "0.1.8", "private": true, "scripts": { "dev": "next dev", diff --git a/apps/web/src/pages/index.tsx b/apps/web/src/pages/index.tsx index 8d3f8a7..25a7f36 100644 --- a/apps/web/src/pages/index.tsx +++ b/apps/web/src/pages/index.tsx @@ -30,6 +30,7 @@ const Home: NextPage = () => { ( diff --git a/packages/poply/CHANGELOG.md b/packages/poply/CHANGELOG.md index bf46fb6..17cdd91 100644 --- a/packages/poply/CHANGELOG.md +++ b/packages/poply/CHANGELOG.md @@ -1,5 +1,11 @@ # poply +## 3.1.5 + +### Patch Changes + +- Add README and position prop + ## 3.1.3 ### Patch Changes diff --git a/packages/poply/README.md b/packages/poply/README.md new file mode 100644 index 0000000..8d6b3f7 --- /dev/null +++ b/packages/poply/README.md @@ -0,0 +1,107 @@ +

+ +

+

+ + + License: MIT +

+ +

+ https://poply.dev
+ 🎉 Lightweight toast component for React 🎉 +

+ +## Installation + +```sh +# pnpm (recommended): +pnpm add poply + +# npm: +npm install poply + +# yarn: +yarn add poply +``` + +## Usage + +Add `` to your app component: +```tsx + import { Toaster, toast } from 'poply'; + + function App() { + return ( +
+ + +
+ ) + } +``` + +### Usage with Next 13 appDir +Import `Toaster` and render it inside of a Client Coponent: +```tsx +// app/toaster-provider.tsx +'use client' + +import { Toaster } from 'poply'; + +export default function ToasterProvider({ children }: { children: React.ReactNode }) { + return ( + <> + {children} + + + ); +} +``` +As your provider has been marked as a Client Component, your Server Component can now directly render it: +```tsx +// app/layout.tsx +import ToasterProvider from './toaster-provider'; + +export default function RootLayout({ children }: { children: React.ReactNode }) { + return ( + + + + {children} + + + + ); +} +``` + +## Options + +Toaster component accepts following props: + +| Prop | Description | +|------------|----------------------------------| +| bgColor | Color of toast background | +| textColor | Color of text and close icon | +| customComponent | Custom component to render toast | +| position | Position of toast container | + +#### Custom component example: +```tsx +import { Toaster, toast } from 'poply'; +import { CustomToast } from './components/custom-toast'; + +function App() { + return ( +
+ + } /> +
+ ) +} +``` + +## License + +Licensed under MIT diff --git a/packages/poply/package.json b/packages/poply/package.json index affcfde..09571f7 100644 --- a/packages/poply/package.json +++ b/packages/poply/package.json @@ -2,7 +2,7 @@ "name": "poply", "description": "Poply is lightweight toast library for React", "repository": "sveenxx/poply", - "version": "3.1.3", + "version": "3.1.5", "main": "dist/index.js", "types": "dist/index.d.ts", "exports": { diff --git a/packages/poply/src/components/Toaster.tsx b/packages/poply/src/components/Toaster.tsx index ca17afe..7f672b2 100644 --- a/packages/poply/src/components/Toaster.tsx +++ b/packages/poply/src/components/Toaster.tsx @@ -2,16 +2,26 @@ import React, { memo, ReactNode, useSyncExternalStore } from 'react'; import { toastStore } from '../toast'; import { Toast, ToastProps, ToastWrapper } from './Toast'; import { setup } from 'goober'; +import { ToastPosition } from '../types'; +import { DEFAULT_POSITION } from '../constants'; setup(React.createElement); type ToasterProps = { bgColor?: string; textColor?: string; + position?: ToastPosition; + duration?: number; customComponent?: (props: ToastProps) => ReactNode; }; -export const Toaster = ({ bgColor, textColor, customComponent }: ToasterProps) => { +export const Toaster = ({ + bgColor, + textColor, + customComponent, + position, + duration, +}: ToasterProps) => { const toasts = useSyncExternalStore( toastStore.subscribe, toastStore.getSnapShot, @@ -26,11 +36,13 @@ export const Toaster = ({ bgColor, textColor, customComponent }: ToasterProps) = pointerEvents: 'none', }} > - {toasts.map((toast) => - customComponent ? ( + {toasts.map((toast) => { + const toastPosition = toast.position || position || DEFAULT_POSITION; + + return customComponent ? ( @@ -39,6 +51,7 @@ export const Toaster = ({ bgColor, textColor, customComponent }: ToasterProps) = bgColor, remove: toast.destroy, textColor, + position: toastPosition, toastIndex: toasts.indexOf(toast), })} @@ -47,12 +60,13 @@ export const Toaster = ({ bgColor, textColor, customComponent }: ToasterProps) = {...toast} bgColor={bgColor} textColor={textColor} + position={toastPosition} remove={toast.destroy} key={toast.id} toastIndex={toasts.indexOf(toast)} /> - ), - )} + ); + })} ); }; diff --git a/packages/poply/src/constants.ts b/packages/poply/src/constants.ts new file mode 100644 index 0000000..497ea9f --- /dev/null +++ b/packages/poply/src/constants.ts @@ -0,0 +1,3 @@ +export const DEFAULT_DURATION = 3000; +export const DEFAULT_POSITION = 'bottom-center'; +export const TOAST_CLOSE_DELAY = 300; diff --git a/packages/poply/src/toast.ts b/packages/poply/src/toast.ts index 62055e8..ec01815 100644 --- a/packages/poply/src/toast.ts +++ b/packages/poply/src/toast.ts @@ -1,11 +1,6 @@ -import { DefaultOptions, Toast, ToastType } from './types'; +import { DefaultOptions, Toast, ToastPosition, ToastType } from './types'; import { getRandomId } from './utils/get-random-id'; - -const DEFAULT_OPTIONS = { - position: 'bottom-center', - duration: 3000, -} as DefaultOptions; -const TOAST_CLOSE_DELAY = 300; +import { DEFAULT_DURATION, TOAST_CLOSE_DELAY } from './constants'; const observers = new Set<{ (): void; @@ -85,8 +80,8 @@ export const toastStore = Object.freeze({ // return; // } - const duration = options.duration || DEFAULT_OPTIONS.duration; - const position = options.position || DEFAULT_OPTIONS.position; + const duration = options.duration || DEFAULT_DURATION; + const position = options.position; const id = getRandomId(); toasts = [ diff --git a/packages/poply/src/types.ts b/packages/poply/src/types.ts index b20341c..f5dff83 100644 --- a/packages/poply/src/types.ts +++ b/packages/poply/src/types.ts @@ -1,5 +1,5 @@ export type DefaultOptions = { - position: ToastPosition; + position: ToastPosition | undefined; duration: number; }; @@ -18,7 +18,7 @@ export type Toast = { message: string; type: ToastType; duration: number; - position: ToastPosition; + position: ToastPosition | undefined; timeout: ReturnType; isVisible: boolean; destroy: () => void;