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 System -
useNew()
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 notices -
useNotice(noticeId)
Returns None or Some(notice) -
useSetShownNoticeType
Lets you control if you want to show only theActive
notices, orAll
of them -
useRemoveNotice()
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)
}
}
})
};