react-screen-notice

Full-screen FPS-style edge vignette notices for React. Show error, warning, or success feedback with a damage-indicator effect at the screen edges — no text, purely visual.

Install

npm install react-screen-notice

Quick start

Wrap your app with ScreenNoticeProvider once, then call notice anywhere:

import { ScreenNoticeProvider, notice } from 'react-screen-notice';

function App() {
  return (
    <ScreenNoticeProvider>
      <YourApp />
    </ScreenNoticeProvider>
  );
}

// Trigger notices from anywhere
notice.error();
notice.warning();
notice.success();

API

notice.error(options?)

notice.warning(options?)

notice.success(options?)

Show a full-screen edge vignette notice.

notice.dismiss()

Manually dismiss the active notice early.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | duration | number | 1200 | How long the notice stays visible (ms) | | intensity | number | 1 | Shadow opacity, 0–1 | | pulse | boolean | true for error/warning, false for success | Pulsing edge animation; false = simple fade in/out | | pulseCount | number | 3 | Number of pulses when pulse is true (1–10) | | color | string | type default | Override edge color (hex or CSS color) | | ariaLabel | string | type default | Accessible label for screen readers |

Example with options

notice.error({ duration: 1500, intensity: 0.8, pulse: true, pulseCount: 5 });
notice.success({ pulse: false });
notice.warning({ color: '#ff6b00', duration: 2000 });

Default colors

| Type | Color | |------|-------| | error | rgba(255, 0, 0, 0.9) | | warning | rgba(255, 170, 0, 0.9) | | success | rgba(0, 255, 120, 0.75) |

Development

npm install
npm run dev    # demo app at http://localhost:5173
npm run build  # build library to dist/

License

MIT