Notification
How To Use
- Put
<CNotification />
in global layout
import { CNotification } from '@casual-ui/react'
function APP {
return (
<>
<CNotification />
// Other global layout components
</>
)
}
- Then open notification by
useNotification
hook
function Demo() {
const { open } = useNotification()
return (
<CButton
label="Open notification"
onClick={() => open({ title: 'Hi, there', message: 'Some notification content' })}
/>
)
}
Attention
Please make sure <CNotification />
only used once in the whole app
Basic Usage
Loading...
function Demo() {const { open } = useNotification()return (<CButtonlabel="Open Notification"onClick={() =>open({title: 'Hi, there',message: 'Hello, world',})}/>)}
Fold/Expand Code
Themes
Loading...
function Demo() {const { open } = useNotification()const openWithTheme = theme => {open({title: `Theme: ${theme}`,message: `This is a ${theme} notification`,theme,})}return (<><CButton label="Primary" onClick={() => openWithTheme('primary')} /><CButtonlabel="Secondary"theme="secondary"onClick={() => openWithTheme('secondary')}/><CButtonlabel="Warning"theme="warning"onClick={() => openWithTheme('warning')}/><CButtonlabel="Negative"theme="negative"onClick={() => openWithTheme('negative')}/></>)}
Fold/Expand Code
Positions
Loading...
function Demo() {const {matArrowBack,matArrowUpward,matArrowForward,matArrowDownward,matFullscreenExit,} = MdIconsconst { open } = useNotification()const openWithPosition = (alignX, alignY) => {open({title: 'Hi, there',message: 'Hello, world',alignX,alignY,})}return (<><div className="c-row c-gutter-sm"><div><CButton icon onClick={() => openWithPosition('start', 'start')}><CIconcontent={matArrowUpward}style={{ transform: 'rotate(-45deg)' }}/></CButton></div><div><CButton icon onClick={() => openWithPosition('center', 'start')}><CIcon content={matArrowUpward} /></CButton></div><div><CButton icon onClick={() => openWithPosition('end', 'start')}><CIconcontent={matArrowUpward}style={{ transform: 'rotate(45deg)' }}/></CButton></div></div><div className="c-row c-gutter-sm"><div><CButton icon onClick={() => openWithPosition('start', 'center')}><CIcon content={matArrowBack} /></CButton></div><div><CButton icon onClick={() => openWithPosition('center', 'center')}><CIcon content={matFullscreenExit} /></CButton></div><div><CButton icon onClick={() => openWithPosition('end', 'center')}><CIcon content={matArrowForward} /></CButton></div></div><div className="c-row c-gutter-sm"><div><CButton icon onClick={() => openWithPosition('start', 'end')}><CIconcontent={matArrowBack}style={{ transform: 'rotate(-45deg)' }}/></CButton></div><div><CButton icon onClick={() => openWithPosition('center', 'end')}><CIcon content={matArrowDownward} /></CButton></div><div><CButton icon onClick={() => openWithPosition('end', 'end')}><CIconcontent={matArrowForward}style={{ transform: 'rotate(45deg)' }}/></CButton></div></div></>)}
Fold/Expand Code
No Auto Close
Loading...
function Demo() {const { open } = useNotification()return (<CButtonlabel="Open Notification"onClick={() =>open({title: 'Hi, there',message: 'Hello, world',timeout: 0,alignX: 'end',alignY: 'center',})}/>)}
Fold/Expand Code
No Close Icon & Manual Close
Loading...
function Demo() {const { open } = useNotification()const [closeFunction, setCloseFunction] = useState(null)const onClick = () => {if (closeFunction) {closeFunction()setCloseFunction(null)return}const { close } = open({title: 'Hi, there',message: 'This is a notification without close icon.',timeout: 0,closeIcon: false,})setCloseFunction(() => close)}return (<CButtonlabel={closeFunction ? 'Close notification' : 'Open Notification'}theme={closeFunction ? 'negative' : 'primary'}onClick={onClick}/>)}
Fold/Expand Code
Dynamic Content
Loading...
function Demo() {const { open } = useNotification()const openWithDynamicContent = () => {const { changeContent } = open({title: 'Hi, there',message: 'Hello, world',timeout: 7000,})setTimeout(() => {changeContent({title: 'Warning',message: 'Content changed!',theme: 'warning',})setTimeout(() => {changeContent({title: 'Error',message: 'Content changed again!',theme: 'negative',})setTimeout(() => {changeContent({title: 'Goodbye',message: 'About to disappear',theme: 'secondary',})}, 2000)}, 2000)}, 2000)}return <CButton label="Open Dynamic Notification" onClick={openWithDynamicContent} />}
Fold/Expand Code