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

react-local-toast

v2.0.3

Published

[![npm version][npmv-image]][npmv-url] [![npm downloads][npmd-image]][npmd-url]

Downloads

38

Readme

react-local-toast

npm version npm downloads

Local toast helps you to provide feedback related to particular components on page

[!IMPORTANT]
This is v2 of react-local-toast. There weren't any changes in API, but v2 doesn't provide minified styles.

Features

  • Local toasts are linked to particular component in DOM.
  • Toast can be displayed on right/left/top/bottom side of component.
  • Toast can be hidden after some timout or hidden programatically.
  • Component might have multiple toasts.
  • Multiple toasts stucks vertically (even if displayed on left or right side).
  • info, success, warning, error and loading toasts out of the box.
  • You can bring your own design. Or your own Toast component. Or your custom implementation of toasts.
  • WAI-ARIA support.
  • TypeScript!

Documentation and showcase

Can be found here. Check it out, I spent a lot of effort making it 😅.

Installation

npm install react-local-toast --save

# Or if you prefer yarn
yarn add react-local-toast

Basic Usage

react-local-toast doesn't automatically inject its styles into DOM, you need to do that. In most cases it will be just:

import 'react-local-toast/dist/bundle.css';

This should work fine for most of tools (Create React App included). For more specific use cases (e.g. using toasts in Shadow DOM) you might want to inject styles manually.

Now you need to wrap your application in LocalToastProvider.

import React from 'react';
import { LocalToastProvider } from 'react-local-toast';

export default () => {
    return (<LocalToastProvider>
        {/* All your components that will use local toasts should be children of this provider. */}
        <App />
    </LocalToastProvider>);
};

Local toasts are linked to particular components on page, so let's mark our component as target for local toast:

import React from 'react';
import { LocalToastTarget } from 'react-local-toast';

export const App = () => {
    return (<div>
        <p>This component should be inside LocalToastProvider</p>
        {/* Wrap your component with <LocalToastTarget> */}
        <LocalToastTarget name="btn">
            <button>Click me please!</button>
        </LocalToastTarget>
    </div>);
};

Local toast uses refs to get position of component, so in case you want to use toasts with functional components – make sure they are wrapped in React.forwardRef.

And final piece! Update your component to actually produce local toasts:

import React from 'react';
// New import here !!
import { LocalToastTarget, useLocalToast } from 'react-local-toast';

export const App = () => {
    // Use hook to show and hide toasts
    const {showToast, removeToast} = useLocalToast();

    return (<div>
        <p>This component should be inside LocalToastProvider</p>
        <LocalToastTarget name="btn">
            <button onClick={() => showToast('btn', 'Hello my first toast!')}>Click me please!</button>
        </LocalToastTarget>
    </div>);
};

In case you need to show toast from class component, you can use HOC like this:

import { LocalToastTarget, withLocalToast, LocalToastHocProps } from 'react-local-toast';

interface Props extends LocalToastHocProps {
    name: string
}

class ClassComp extends React.Component<Props, any> {
    sayHello = () => {
        this.props.showToast('class_comp', `Hello, ${this.props.name}!`)
    };
    render() {
        return (<div>
            <LocalToastTarget name='class_comp'>
                <button onClick={sayHello}>Say hello</button>
            </LocalToastTarget>
        </div>);
    }
}

// And later use thic component as you usually do
export default withLocalToast(ClassComp);

This will pass toast-related functions (exactly same as in useLocalToast hook) as props to wrapped component.

Cool, huh?

License

MIT