Installing

Install the library

npm install @apideck/components

Getting started

Wrap your app in a ToastProvider

import { ToastProvider } from '@apideck/components'

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <ToastProvider>
      <Component {...pageProps} />
    </ToastProvider>
  )
}

export default App

Import the useToast hook and use it to open and close Toasts with the addToast and removeToast functions.

import { useToast } from '@apideck/components'

export default function MyComponent() {
  const { addToast } = useToast()

  return <button onClick={() => addToast({ title: 'Yo world' })}>Click</button>
}

Basic

You can pass the type success, info, warning, and error to the addToast function.

import { Button, useToast } from '@apideck/components'

export default function ToastBasic() {
  const { addToast } = useToast()

  const options = {
    title: 'Successfully clicked!',
    description: 'Pretty impressive how you clicked that button.',
    type: 'success',
    autoClose: true
  }

  return <Button text="Click me" onClick={() => addToast(options)} />
}

Props

Coming soon