Peek Documentation

Installation

You can install Peek using npm or include it directly via CDN.

Using npm:

npm install peek-notify

Using CDN:

<script src="https://unpkg.com/peek-notify/dist/peek.min.js"></script>

Basic Usage

Initialize Peek and show your first notification:

// Initialize Peek
const peek = new Peek();

// Show a simple notification
peek.show({
    title: 'Hello!',
    message: 'Welcome to Peek notifications.'
});

Using Peek in a React component:

import { useEffect, useRef } from 'react';
import { Peek } from 'peek-notify';

function App() {
  const peekRef = useRef(null);

  useEffect(() => {
    // Initialize Peek once when component mounts
    peekRef.current = new Peek();

    // Optional: Cleanup on unmount
    return () => {
      // Any cleanup if needed
    };
  }, []);

  const showNotification = () => {
    peekRef.current.show({
      title: 'Hello React!',
      message: 'Welcome to Peek notifications'
    });
  };

  const showSuccess = () => {
    peekRef.current.success('Operation completed!', 'Success');
  };

  return (
    
      
      
    
  );
}

Important: Initialize Peek in useEffect and store the instance in useRef to avoid creating multiple instances on re-renders.

Using Peek in a Vue.js component with Composition API:


import { ref, onMounted } from 'vue'
import { Peek } from 'peek-notify'

export function usePeek(options = {}) {
  const peekInstance = ref(null)

  onMounted(() => {
    peekInstance.value = new Peek(options)
  })

  return {
    show: (options) => peekInstance.value?.show(options),
    success: (message, title) => peekInstance.value?.success(message, title),
    error: (message, title) => peekInstance.value?.error(message, title),
    warning: (message, title) => peekInstance.value?.warning(message, title),
    info: (message, title) => peekInstance.value?.info(message, title)
  }
}

Using the composable in a component:

Note: Check the documentation for Options API and Provide/Inject pattern examples.

Configuration Options

Customize Peek's behavior with these configuration options:

const peek = new Peek({
    duration: 5000,      // Duration in milliseconds
    maxToasts: 3        // Maximum number of toasts
});

Option	Type	Default	Description
duration	number	5000	Duration in milliseconds before toast disappears
maxToasts	number	3	Maximum number of toasts to show at once

Notification Types

Peek supports different types of notifications:

// Success notification
peek.success('Operation completed!', 'Success');

// Error notification
peek.error('Something went wrong!', 'Error');

// Warning notification
peek.warning('Please be careful!', 'Warning');

// Info notification
peek.info('Here is some information.', 'Info');

API Reference

Methods

Method	Parameters	Description
show(options)	{ title?, message, type?, duration? }	Show a notification with custom options
success(message, title?)	message: string, title?: string	Show a success notification
error(message, title?)	message: string, title?: string	Show an error notification
warning(message, title?)	message: string, title?: string	Show a warning notification
info(message, title?)	message: string, title?: string	Show an info notification