npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

re-alert

v0.3.0

Published

A light-weight web page notification system for React and Redux

Downloads

4

Readme

re-alert

Build Status Coverage Status npm version devDependency Status devDependency Status

A light-weight web page notification system for React and Redux.

Demo

Dependencies

Re-alert depends on React and Redux. See package.json for more details.

Installation

$ npm install --save re-alert

Testing

To run tests, execute test script with npm.

$ npm run test

To run coverage tests, execute coverage script with npm.

$ npm run coverage

Integration

  1. Include the reducer of notification system into your root reducer.

    import { notificationReducer } from 're-alert';
    
    const rootReducer = combineReducers({
      ...
      notification: notificationReducer
    });
    
    export default rootReducer;
  2. Since re-alert uses Redux thunk middleware to create async operations, include thunk middleware when creating store.

    import { createStore, applyMiddleware } from 'redux';
    import thunkMiddleware from 'redux-thunk';
    import rootReducer from './reducers';
    
    export default function configureStore(initialState) {
      return createStore(
        rootReducer,
        initialState,
        applyMiddleware(
          thunkMiddleware
        )
      );
    }
  3. Include the re-alert component into your application's JSX.

    import NotificationSystem from 're-alert';
    
    const App = props => (
      <div>
        <NotificationSystem />
        ...
      </div>
    );
    • To customize styles of notifications, include a custom class name for NotificationSystem.

      <NotificationSystem customClassName="custom-class" />

      In CSS file, you can override original CSS with #notification-container.custom-class selector. Refer to the original stylesheet to see what you can override.

    • To allow HTMLs in all notifications, set dangerouslyAllowHTML prop to true for NotificationSystem.

      <NotificationSystem dangerouslyAllowHTML={true} />

      Allowing HTML is risky as it may open your site to cross-site scripting (XSS) attack. Sanitize data before use it directly when allowing HTML.

Quick Example

You can show a success message in your action file like this.

import { showSuccess } from 're-alert';

export function updateProfile() {
  return dispatch => {
    ...
    dispatch(showSuccess('Your profile has been updated.', 5000));
  };
}

Available Actions

  • showInformation(message, autoCloseDelay);
  • showSuccess(message, autoCloseDelay);
  • showWarning(message, autoCloseDelay);
  • showError(message, autoCloseDelay);

These functions display messages with different level, and accept same arguments:

  • message - The message to display.
  • autoCloseDelay - Time before the notification automatically closes. Set to 0 to prevent notification to be closed automatically.

Release History

  • 0.3.0
    • Support HTML in notifications.
  • 0.2.0
    • NPM package now only contains minified JS.
  • 0.1.0
    • First proper release.

License

MIT