react-snackbar-ui-customizable v0.0.14

Example

without timer progressbar	with timer progressbar

Getting Started

Installation

$ npm i react-snackbar-ui-customizable
or
$ yarn add react-snackbar-ui-customizable

Features

Snackbar Provider Setup

To use snackbar, you must wrap the SnackbarContextProvider at the top of your application

import { SnackbarContextProvider } from 'react-snackbar-ui-customizable'

const App = () => {
  return (
    <SnackbarContextProvider>
      {children}
    </SnackbarContextProvider>
  )  
}

Snackbar Usage

Then you can use it by declaring it in a react hook method inside the component you need.

import { useSnackbar } from 'react-snackbar-ui-customizable'

const Example = (): JSX.Element => {
  const snackbar = useSnackbar();

  return (
    <button onClick={() => snackbar.on({ title: 'snackbar title', message: 'this is snackbar message' })}>
      Show Snackbar!
    </button>
  )
}

API

SnackbarContextProvider

( Required) | property name | Description | Type | | ------------- | ------------------------------ | --------- | | id | portal id. (default: snackbar-portal) | string | | option | portal options | OptionType | | `children` | your application components | JSX.Element |

option (all of the option property is optional) - OptionType

useSnackbar

Snackbar Option (when you use on method of useSnackbar)

Guide

1. Local option setting value is always applied before global option setting value.
   • In the example below, the duration is set to 10, which is set locally.

<SnackbarContextProvider
  id="snackbar-portal-unique-id"
  option={{ duration: 0 }}
>
  <Example />
</SnackbarContextProvider>

...
import { useSnackbar } from 'react-snackbar-ui-customizable'

const Example = (): JSX.Element => {
  const snackbar = useSnackbar();

  return (
    <button onClick={() => snackbar.on({ title: 'snackbar title', message: 'this is snackbar message', duration: 10 })}>
      Show Snackbar!
    </button>
  )
}

CSS Style

type is one of the injected snackbar type (SUCCESS, ERROR, WARN, INFO)

Snackbar Container

className: snackbar-container snackbar-container--{type}

Snackbar box

className: snackbar-box snackbar-box--{type}

Snackbar progressbar

className: snackbar-progressbar snackbar-progressbar--{type}

Snackbar title

className: snackbar-title snackbar-title--{type}

Snackbar description

className: snackbar-description snackbar-description--{type}

Snackbar button

className: snackbar-button snackbar-button--{type}