Skip to content

raksyedev/basit-toast

Repository files navigation

BASIT TOAST 🔔🔔

a basit (simple) toast like notification 🔔🔔.

Daftar Isi 📚


Instalasi


yarn add basit-toast
npm install basit-toast

BasitToastComponents

import React, { useState } from 'react'
import { BasitToast } from 'basit-toast'
import 'basit-toast/dist/basit-toast.css'

const ExampleBasitToast = () => {
  const [openToast, setOpenToast] = useState(false)

  const handleClick = () => {
    setOpenToast(true)
  }

  return (
    <>
      <BasitToast
        isOpen={openToast}
        handleClose={() => setOpenToast(false)}
        position='bottomcenter'
        severity='errors'
        handleCloseDuration={3000}
        message='Your errors toast here !'
      />
      <button onClick={handleClick}>Click</button>
    </>
  )
}

export default ExampleBasitToast

useBasitToast

import React from 'react'
import { useBasitToast } from 'basit-toast'
import 'basit-toast/dist/basit-toast.css'

const ExampleUseBasitToast = () => {
  const { defaults } = useBasitToast()

  const handleClick = () => {
    defaults('Hallo', 'bottomcenter')
  }

  return <button onClick={handleClick}>click</button>
}

export default ExampleUseBasitToast

basittoast

import React from 'react'
import { basittoast } from 'basit-toast'
import 'basit-toast/dist/basit-toast.css'

const ExampleBasitToast = () => {
  const handleClick = () => {
    basittoast.info('HELLO', 'bottomcenter', 3000)
  }

  return <button onClick={handleClick}>click</button>
}

export default ExampleBasitToast

Props

Props Type Required
isOpen boolean true
severity ["default", "success", "warning", "errors", "info"] string true
position ["topright", "topleft", "topcenter", "bottomright", "bottomleft", "bottomcenter",] string true
message string true
handleClose func true
handleCloseDuration number false

How to Contribute ?


  1. clone this repository
  2. install dependencies
yarn
  1. checkout to new branch
git checkout -B new-feature
  1. modify and push in your branch
  2. add pull request and done.

Licence

MIT.