This package has been deprecated

Author message:

This package is no longer maintained. A new library has been put up by the author: react-simple-widgets which includes its functionality. For more information, contact the author at [e-mail]

react-simple-flash

A super simple, highly customizable flash message framework for my React applications

Installation

npm i -D react-simple-flash

This library makes use of React's Context API, so your react version should have the API implemented (i.e. v16.3.0 onwards)

Usage

The steps below describe how to setup the framework in you project

Step 1: Enclose root with <FlashProvider />

Wrap your root component in the <FlashProvider /> component. This adds the necessary context to your application

import { React, ReactDOM } from "react";
import { FlashProvider } from "react-simple-flash";
import App from "./app";
...
 
ReactDOM.render(
    <FlashProvider>
        <App />
    </FlashProvider>,
    document.getElementById("#root")
)

Step 2: Include the <FlashHolder />

This component renders the flash messages. You should only need one usage in the entire app

import React from "react";
import { FlashHolder } from "react-simple-flash";
// import { CustomFlashItem } from "path/to/custom-flash-item";
 
const App = () => {
    return (
        <div id="app">
            <FlashHolder />
            {/* If you'd like to use your own flash message component, use the syntax below */}
            {/* <FlashHolder component={CustomFlashItem} /> */}
        </div>
    );
};
 
export default App;

The <FlashHolder /> renders each flash message in an inbuilt <Flash /> component. If you'd like to switch out this component entirely for yours, use the component prop to specify this

See the Customization guide on how to create a custom flash component.

Step 3: Use flash functions

Now the fun part. You can use the flash functions from the context to display flash messages from anywhere in your app

import React from "react";
import React, { useContext } from "react";
import { FlashContext } from "react-simple-flash";
 
export const FancyButtonGroup = () => {
    const { flashSuccess, flashInfo, flashWarning, flashError } = useContext(FlashContext);
 
    return (
        <div className="fancy-button-group">
            <button onClick={() => flashInfo("Info message")}>Flash info message</button>
            <button onClick={() => flashSuccess("Success message")}>Flash success message</button>
            <button onClick={() => flashWarning("Warning message")}>Flash warning message</button>
            <button onClick={() => flashError("Error message")}>Flash error message</button>
        </div>
    );
};

Each flash function accepts a message (string), buttonText (string) and buttonAction (Function).

• message is the text to be displayed
• buttonText is the string displayed on the close button within the flash message. Defaults to Ok
• buttonAction is an optional function to be called when the close button on the flash is clicked

Like we promised, super simple :)

Storybook

The stories for the component can be found here.

To run these stories:

1. Clone the repository
2. Run npm install to install dependencies
3. Run npm run storybook to start the storybook server.

For more information on Storybook, click here

Maintainers

• Kwame Opare Asiedu

Support

If you'd like to support this project, you can do so by becoming a patreon on Patreon

It would be really helpful if you can star the project on Github