Install: `yarn add @seamonster-studios/notice-system`

Usage no npm install needed!

<script type="module">
  import seamonsterStudiosNoticeSystem from 'https://cdn.skypack.dev/@seamonster-studios/notice-system';



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


  • Focus on async request status
  • Life bar
  • Life bar pause on hover
  • View all previous notices


Basic Usage

Setup provider component:

// ... app

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,
        "Our development team has been notified. Please try again later."

let palette: NoticeSystem.palette =
    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


  • 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 notably add and remove. 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 notice id 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 the Active notices, or All 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=?,
) =>

// Usage
let myAsyncRequest = (~entity) => {
  notice.add(~title=entity, `loading);

  |> 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
      | Error(error) => {
        // ...
        notice.add(~content="Your error message here"->React.string, `error)