Notice

General

Notice
Display notification reminder information.

Show Code

import React, { useRef, useState } from "react";
import Notification from "pocko-ui/Notification";
import 'pocko-ui/Notification/index.css'
 
const notificationRef = useRef(null);
 
<div className="mt-4">
  <button
    onClick={() => {
      notificationRef.current?.open({
        message: "Notice Title",
        description:
          "This is the content of the notification box, where you can enter text. It will hidden after 3 seconds",
        duration: 3,
      });
    }}
    className="btn btn-primary"
  >
    Open the notification box
  </button>
 
  <Notification ref={notificationRef} />
</div>;

Customize hidden time

Show Code

import React, { useRef, useState } from "react";
import Notification from "pocko-ui/Notification";
import 'pocko-ui/Notification/index.css'
 
const notificationRef = useRef(null);
const notificationRef2 = useRef(null);
 
<div className="mt-4">
  <button
    onClick={() => {
      notificationRef.current?.open({
        message: "Notice Title",
        description:
          "This is the content of the notification box, where you can enter text. It will hidden after 3 seconds",
        duration: 3,
      });
    }}
    className="btn btn-primary"
  >
    Open the notification box
  </button>
 
  <button
    onClick={() => {
      notificationRef2.current?.open({
        message: "Notice Title",
        description:
          "This is the content of the notification box, where you can enter text. It will hidden after 3 seconds",
        duration: 3,
      });
    }}
    className="btn btn-primary"
  >
    Open the notification box2
  </button>
 
  <Notification ref={notificationRef} />
 
  <Notification ref={notificationRef2} />
</div>;

Custom close button

To customize the style or font of the close button.

Show Code

import React, { useRef, useState } from "react";
import Notification from "pocko-ui/Notification";
import 'pocko-ui/Notification/index.css'
 
const notificationRef = useRef(null);
 
<div className="mt-4">
  <button
    onClick={() => {
      notificationRef.current?.open({
        message: "Notice Title",
        description:
          "This is the content of the notification box, where you can enter text. It will hidden after 3 seconds",
        duration: 3,
      });
    }}
    className="btn btn-primary"
  >
    Open the notification box
  </button>
 
  <Notification
    ref={notificationRef}
    closeIcon={
      <>
        <i className="fa-solid fa-circle-user"></i>
      </>
    }
  />
</div>;

API

Notice

import Notification from "pocko-ui/Notification";
import 'pocko-ui/Notification/index.css'

Property	Type	Default	Description	Required
`wrapperContentClassName`	`string`	-	Additional CSS class name for the notification container	-
`wrapperContentMessageClassName`	`string`	-	CSS class name for the notification message text	-
`wrapperContentDescriptionClassName`	`string`	-	CSS class name for the notification description text	-
`closeIcon`	`React.ReactNode`	`×`	Custom close button content	-
`onOpen`	`() => void`	-	Callback function triggered when the notification is opened	-
`onClose`	`() => void`	-	Callback function triggered when the notification is closed	-

Notice Object

Property	Type	Default	Description	Required
`message`	`string`	-	Notice title text	✔
`description`	`string`	-	Optional notification description text	-
`duration`	`number`	-	Optional duration in seconds; 0 means do not auto-close	-

Installation