Basit Toast
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 ?
- 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.
Licence
MIT.