slide-message

A lightweight React notification system with slide animations, variant support, and themeable CSS custom properties.

Features

• Slide animations — direction-aware enter/exit animations for 4 corner positions.
• One message at a time — no notification stacks; the next call is silently ignored while a message is active.
• Variant system — built-in message variants with icon, label, and default text. Easily extensible.
• Themeable — all colors, radii, spacing, and timing are CSS custom properties with --sm- prefix and sane dark-mode defaults.
• Zero dependencies — only react and react-dom as peer dependencies.
• Accessible — role="status", aria-live="polite", aria-atomic="true", and prefers-reduced-motion support.

Installation

# npm
npm install slide-message

# pnpm
pnpm add slide-message

# yarn
yarn add slide-message

Quick Start

import { SlideMessageProvider, useSlideMessage } from 'slide-message';
import 'slide-message/dist/slide-message.css';

function App() {
  return (
    <SlideMessageProvider>
      <MyButton />
    </SlideMessageProvider>
  );
}

function MyButton() {
  const { notify } = useSlideMessage();

  return (
    <button onClick={() => notify({ position: 'top-right' })}>
      Notify me
    </button>
  );
}

Important: import slide-message/dist/slide-message.css once in your app's entry point. <SlideMessageProvider> must be mounted only once, at the root of your component tree.

API Reference

<SlideMessageProvider>

The context provider. Wrap your app with it once at the root.

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | children | ReactNode | Yes | — | Your application tree. |

useSlideMessage()

Hook that exposes the notify function.

const { notify } = useSlideMessage();

notify(params)

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | message | string | 'emptyState' | Variant key. See Variants. | | text | string | undefined | Custom text. If omitted, the variant's default text is used. | | position | string | 'top-left' | Corner position: top-left, top-right, bottom-left, bottom-right. | | duration | number | 2000 | Visible time in ms (excluding enter/exit animations). | | offsetX | number | 20 | Distance in px from the nearest horizontal edge. | | offsetY | number | 20 | Distance in px from the nearest vertical edge. |

Variants

Available variants in v1.0.0:

| Key | Label | Default text | Description | |-----|-------|--------------|-------------| | emptyState | En Desarrollo | Funcionalidad en Desarrollo | For unimplemented features or buttons. |

Import MESSAGE_VARIANTS to inspect variant keys programmatically:

import { MESSAGE_VARIANTS } from 'slide-message';

Theming

All visual tokens are CSS custom properties with the --sm- prefix and dark-mode defaults. Override them in :root or any parent selector:

:root {
  --sm-bg-elevated: #ffffff;
  --sm-border-default: #e0e0e0;
  --sm-text-color: #111111;
  --sm-label-color: #666666;
  --sm-accent-color: #6366f1;
  --sm-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  --sm-progress-bg: #f0f0f0;
}

Full variable reference

| Variable | Default | Description | |----------|---------|-------------| | --sm-bg-elevated | #222222 | Card background color. | | --sm-border-default | #3D3D3D | Card border color. | | --sm-shadow | 0 4px 12px rgba(0,0,0,0.4) | Card box-shadow. | | --sm-radius | 6px | Card border-radius. | | --sm-radius-sm | 4px | Icon border-radius. | | --sm-gap | 12px | Gap between icon and text body. | | --sm-padding-y | 16px | Card vertical padding. | | --sm-padding-x | 20px | Card horizontal padding. | | --sm-body-gap | 4px | Gap between label and text. | | --sm-font | system-ui, sans-serif | Font family for label and text. | | --sm-label-color | #9A9A9A | Label (uppercase) text color. | | --sm-text-color | #F0F0F0 | Body text color. | | --sm-progress-bg | #2E2E2E | Progress bar track color. | | --sm-accent-color | #D4AF37 | Accent color (icon, label, progress bar). | | --sm-ease | cubic-bezier(0.16,1,0.3,1) | Enter animation easing. |

Behavior

Only one message is shown at a time. While a message is on screen (including its enter and exit animations), any calls to notify() are silently ignored. This is intentional to prevent notification accumulation.

Accessibility

• The root container uses role="status" with aria-live="polite" and aria-atomic="true" so screen readers announce message changes.
• Animation-only elements (icon, progress bar) use aria-hidden="true".
• Respects prefers-reduced-motion: when enabled, all animations are disabled and exiting messages immediately become transparent.

License

MIT