@seamonster-studios/notice-system
v0.16.0
Published
Install: `yarn add @seamonster-studios/notice-system`
Downloads
28
Readme
NoticeSystem
Install:
yarn add @seamonster-studios/notice-system
Install Peer Dependencies:
yarn add @seamonster-studios/react-use-countdown @seamonster-studios/react-use-measure @seamonster-studios/reason bs-css-emotion bs-react-spring
Features
- Focus on async request status
- Life bar
- Life bar pause on hover
- View all previous notices
Basic Usage
Setup provider component:
<NoticeSystem>
// ... app
</NoticeSystem>
Adding a custom color palette or default content for each of the notice system types (both optional):
let globalNoticeContent: NoticeSystem.globalNoticeContent = {
success: None,
loading: Some((<NoticeSystem.LoaderContent />, `replace)),
warning: None,
info: None,
error:
Some((
<p>
"Our development team has been notified. Please try again later."
->React.string
</p>,
`after,
)),
};
let palette: NoticeSystem.palette =
Css.{
accent: rgba(0, 0, 0, 0.75),
info: rgb(132, 210, 250),
success: rgb(157, 250, 176),
warning: rgb(250, 219, 120),
error: rgb(250, 172, 145),
toggleNoticeTypeButton: {
background: rgb(132, 213, 250),
text: rgba(0, 0, 0, 0.75),
},
};
// ...
<NoticeSystem globalNoticeContent palette>
// ... app
</NoticeSystem>
Hooks
use()
Returns the entire value of the Notice SystemuseNew()
Is the bread and butter hook. When instantiating the hook it creates a new notice without activating it. It then returns a record of methods and values to use. Most notablyadd
andremove
. This is helpful b/c you can use a single notice for all API states of an async request (loading, success, error).useAddNotice()
Lets you create any number of notices. It returns to you the noticeid
upon doing so.useNotices()
Returns an array of all the noticesuseNotice(noticeId)
Returns None or Some(notice)useSetShownNoticeType
Lets you control if you want to show only theActive
notices, orAll
of themuseRemoveNotice()
Lets you inactivate a notice by id
To add a notice (via useNew or useAddNotice)
// Type
type add = (
~content: ReasonReact.reactElement=?,
~el: React.element=?,
~title: string=?,
~life: int=?,
type_
) =>
unit;
// Usage
let myAsyncRequest = (~entity) => {
notice.add(~title=entity, `loading);
Js.Promise.(your_promise())
|> then_(res => {
switch(res) {
| Ok(data) => {
// ...
notice.add(~content="Your success message here"->React.string, `success)
// .. OR ... if the UI is self evident when the response was successful
notice.remove()
}
| Error(error) => {
// ...
notice.add(~content="Your error message here"->React.string, `error)
}
}
})
};