a basit (simple) toast like notification 🔔🔔.
yarn add basit-toast
npm install basit-toast
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
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
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 | 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 |
- clone this repository
- install dependencies
yarn
- checkout to new branch
git checkout -B new-feature
- modify and push in your branch
- add pull request and done.
MIT.