New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

poply

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

poply

Poply is lightweight toast library for React

3.2.1
latest
Source
npm

Version published: 2 years ago

Maintainers: 1

Created: 2 years ago

Source

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

Installation

# pnpm (recommended):
pnpm add poply

# npm:
npm install poply

# yarn:
yarn add poply

Usage

Add <Toaster /> to your app component:

    import { Toaster, toast } from 'poply';

    function App() {
        return (
            <div>
              <button onClick={() => toast.info('Hello world!')}>Toast</button>
              <Toaster />
            </div>
        )
    }

Usage with Next 13 appDir

Import Toaster and render it inside of a Client Coponent:

// app/toaster-provider.tsx
'use client'

import { Toaster } from 'poply';

export default function ToasterProvider({ children }: { children: React.ReactNode }) {
  return (
    <>
      {children}
      <Toaster />
    </>
  );
}

As your provider has been marked as a Client Component, your Server Component can now directly render it:

// app/layout.tsx
import ToasterProvider from './toaster-provider';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ToasterProvider>
          {children}
        </ToasterProvider>
      </body>
    </html>
  );
}

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
maxToasts	Maximum number of toasts to show
maxToastsPerMessage	Maximum number of toasts per message

Custom component example:

import { Toaster, toast } from 'poply';
import { CustomToast } from './components/custom-toast';

function App() {
    return (
        <div>
          <button onClick={() => toast.info('Hello world!')}>Toast</button>
          <Toaster customComponent={({ message, type }) => <CustomToast message={message} type={type} />} />
        </div>
    )
}

License

Licensed under MIT

FAQs

What is poply?

Is poply well maintained?

Package last updated on 14 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

poply

Installation

Usage

Usage with Next 13 appDir

Options

Custom component example:

License

Related posts

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional

Maven Central Adds Sigstore Signature Validation