React Example

Below is a live React example with full configuration options.

import React, { useState } from 'react'
import { NotifContainer, notif } from '@notifi/react'
import '@notifi/core/style.css'

export function ReactRawExample() {
  const [containerProps, setContainerProps] = useState({
    id: 'react-demo',
    expand: true,
    position: 'bottom-end' as const,
    visibleNotifications: 5,
    gap: 8,
  })

  const [notifProps, setNotifProps] = useState({
    notificationContainerId: 'react-demo',
    duration: 2500,
    dismissible: true,
    noPauseOnHover: false,
    position: 'bottom-end' as const,
  })

  const [toastCount, setToastCount] = useState(1)

  const showNotification = () => {
    const id = toastCount
    setToastCount((prev) => prev + 1)

    notif(
      (params: any) => (
        <div
          style={{
            padding: '12px 16px',
            background: 'var(--vp-c-bg-soft)',
            color: 'var(--vp-c-text-1)',
            border: '1px solid var(--vp-c-divider)',
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: '12px',
            width: '100%',
            boxSizing: 'border-box',
          }}
        >
          <div>
            <div style={{ fontWeight: 600, fontSize: '14px' }}>
              React Notification #{id}
            </div>
            <div style={{ fontSize: '12px', opacity: 0.8 }}>
              This is a native React toast notification.
            </div>
          </div>
          <button
            onClick={params?.onCloseNotification}
            style={{
              background: 'transparent',
              border: 'none',
              cursor: 'pointer',
              fontSize: '16px',
              color: 'var(--vp-c-text-2)',
            }}
          >
            ✕
          </button>
        </div>
      ),
      {
        ...notifProps,
      },
    )
  }

  const clearAll = () => {
    notif.dismiss()
  }

  return (
    <section style={{ display: 'grid', gap: '12px' }}>
      <NotifContainer {...containerProps} />

      <div className="raw-controllers">
        <div className="controllerTitle">ContainerProps :</div>

        <div className="raw-form-item">
          <label>expanded :</label>
          <input
            type="checkbox"
            checked={containerProps.expand}
            onChange={(e) =>
              setContainerProps((prev) => ({ ...prev, expand: e.target.checked }))
            }
          />
        </div>

        <div className="raw-form-item">
          <label>position :</label>
          <select
            value={containerProps.position}
            onChange={(e) =>
              setContainerProps((prev) => ({
                ...prev,
                position: e.target.value as any,
              }))
            }
          >
            <option value="bottom-end">bottom-end</option>
            <option value="bottom-center">bottom-center</option>
            <option value="bottom-start">bottom-start</option>
            <option value="top-start">top-start</option>
            <option value="top-end">top-end</option>
            <option value="top-center">top-center</option>
          </select>
        </div>

        <div className="raw-form-item">
          <label>count :</label>
          <input
            type="number"
            value={containerProps.visibleNotifications}
            onChange={(e) =>
              setContainerProps((prev) => ({
                ...prev,
                visibleNotifications: Number(e.target.value),
              }))
            }
          />
        </div>

        <div className="raw-form-item">
          <label>gap :</label>
          <input
            type="number"
            value={containerProps.gap}
            onChange={(e) =>
              setContainerProps((prev) => ({
                ...prev,
                gap: Number(e.target.value),
              }))
            }
          />
        </div>

        <div className="controllerTitle">NotificationProps :</div>

        <div className="raw-form-item">
          <label>duration :</label>
          <input
            type="number"
            value={notifProps.duration}
            onChange={(e) =>
              setNotifProps((prev) => ({
                ...prev,
                duration: Number(e.target.value),
              }))
            }
          />
        </div>

        <div className="raw-form-item">
          <label>dismissible :</label>
          <input
            type="checkbox"
            checked={notifProps.dismissible}
            onChange={(e) =>
              setNotifProps((prev) => ({
                ...prev,
                dismissible: e.target.checked,
              }))
            }
          />
        </div>

        <div className="raw-form-item">
          <label>noPauseOnHover :</label>
          <input
            type="checkbox"
            checked={notifProps.noPauseOnHover}
            onChange={(e) =>
              setNotifProps((prev) => ({
                ...prev,
                noPauseOnHover: e.target.checked,
              }))
            }
          />
        </div>

        <div className="raw-form-item">
          <label>position :</label>
          <select
            value={notifProps.position}
            onChange={(e) =>
              setNotifProps((prev) => ({
                ...prev,
                position: e.target.value as any,
              }))
            }
          >
            <option value="bottom-end">bottom-end</option>
            <option value="bottom-center">bottom-center</option>
            <option value="bottom-start">bottom-start</option>
            <option value="top-start">top-start</option>
            <option value="top-end">top-end</option>
            <option value="top-center">top-center</option>
          </select>
        </div>
      </div>

      <div style={{ display: 'flex', gap: '12px' }}>
        <button className="raw-btn primary" onClick={showNotification}>
          Show notification
        </button>
        <button className="raw-btn danger" onClick={clearAll}>
          Clear All notifications
        </button>
      </div>
    </section>
  )
}